我想加入一个自定义音频播放器。我有一个包含所有内容的音频对象:currentTime,持续时间... 当我实例化组件时,音频为空。 当我的用户选择音频时,我将调用一个组件方法,该方法将实例化音频。 因此,如果创建了音频,则会显示播放器。
在我的实际实现中,音频播放良好,但是滑块不动。我不明白为什么。可能是因为实例化组件时我的音频为空。但是我能做什么呢 ?
<div class="audio-container" v-if="created">
<div v-if="!audioObject.paused">
<img class="icon" :src="'pause.png'" v-on:click="pauseAudio"/>
</div>
<div v-else>
<img class="icon" :src="'play.png'" v-on:click="playAudio">
</div>
<div id="sound-line" class="sound-line">
<v-slider
v-model="audioObject.currentTime"
></v-slider>
</div>
<div id="sound-duration">
</div>
</div>
audioRecorded(audioUrl) {
this.audioObject = new Audio(audioUrl);
console.log(audioUrl)
this.audioObject.src = audioUrl;
this.audioObject.controls = true;
const that = this;
this.audioObject.addEventListener("loadeddata", function() {
that.created = true;
});
console.log(this.audioObject)
//this.audioObject.play()
},