音频当前时间作为v模型v滑块

时间:2019-06-06 12:19:07

标签: vue.js

我想加入一个自定义音频播放器。我有一个包含所有内容的音频对象: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()

    },

0 个答案:

没有答案