html5 audio vue

• 动态修改audio的src后，如何获取时长-----先load，然后在oncanplay中获取，看getXXInfo方法

html:  <audio ref="mySummaryAudio" :src="summaryAudioUrl"></audio>

script:
    data(){
            return {
              
              summaryAudioUrl:'https://xxxx/welcome.mp3', //音频地址，调用接口获取
              summaryAudioStatus:'pause', //pause --当前停止播放状态;play--当前播放状态
              summaryAudioDuration:0, //音频时长
            }
        }

      getXXInfo(){
            let _this = this;
            _this.$refs.mySummaryAudio.load();
            _this.$refs.mySummaryAudio.oncanplay = function () {
              console.log('time  ',_this.$refs.mySummaryAudio.duration);
              _this.summaryAudioDuration = parseInt(_this.$refs.mySummaryAudio.duration);
            }
      }

• 如何修改audio原生样式？----audio不写controls即可
  • 注意，在触发事件的时候，记得监听audio的ended事件

<div class="summary-audio">
    <audio ref="mySummaryAudio" :src="summaryAudioUrl"></audio>
    <div class="hsqin-arrow arrow-left" @click="summaryAudioClick">
         <img class="audio-img" src="xxxxxx/audio.png" alt="">
         <span class="audio-time">20"</span>
    </div>
</div>

summaryAudioClick(){
         let that = this;
         if(that.summaryAudioStatus=='pause'){
              that.$refs.mySummaryAudio.play();
              that.summaryAudioStatus='play'; //当前播放状态,记得修改图片
              that.$refs.mySummaryAudio.addEventListener("ended",function(){
                console.log('ended')
                that.$refs.mySummaryAudio.pause();
                that.summaryAudioStatus='pause';
              });
            }else{
              that.$refs.mySummaryAudio.pause();
              that.summaryAudioStatus='pause';
            }
},

修改之后的audio样式.png

有个问题，在ios下，得到的时间为0，必须点击一下，才会显示正确时间，求大神帮忙解决