在vue页面中,使用audio标签 播放音频和视频

成功的代码

aclick(){
                // this.$refs.audio.src = 'http://sc1.111ttt.cn/2018/1/03/13/396131212186.mp3';
                this.$refs.audio.src = 'http://sc1.111ttt.cn/2018/1/03/13/396131232171.mp3';
                console.log(this.music_path);
                console.log('hello');
                // this.music_path = 'http://sc1.111ttt.cn/2018/1/03/13/396131232171.mp3';
                if (this.is_play){
                    this.$refs['audio'].pause();
                    this.is_play = false
                }else {
                    this.$refs['audio'].play();
                    this.is_play = true
                }
data() {
            return {
                music_path: 'http://sc1.111ttt.cn/2018/1/03/13/396131229550.mp3',}
<el-row>
            <audio ref="audio" :src="music_path">
<!--                <source src="" type="audio/wav">-->
<!--                <source src="" type="audio/mpeg">-->
<!--                <source src="http://sc1.111ttt.cn/2018/1/03/13/396131232171.mp3" type="audio/mpeg">-->
<!--                controls  class="btn-audio"-->
                <!--<source :src="recordUrl" type="audio/mpeg">-->
            </audio>
        </el-row>

html5-audio标签的方法和事件

特别注意:
我在data的变量中,设置了默认值, 如果不设置,会提示错误。
在给标签赋值的时候,不能给变量赋值,因为会不起作用,需要使用

this.$refs.audio.src = 'http://sc1.111ttt.cn/2018/1/03/13/396131232171.mp3';

这样就可以解决了。

你可能感兴趣的:(在vue页面中,使用audio标签 播放音频和视频)