在vue中修改audio的样式

audio自带的样式是这样

浏览器中audio的默认样式

要更改audio样式 只要把controls去掉就可以 然后把自己需要的样式写上去操作audio

1.audio 组件

我这个demo是在循环中使用的 单个的自行修改

<audio :ref="'myAudio'+index" :src="audioSrc"></audio>
<!--代替audio的展示-->
<div class="audioControls" @click.stop="audioClick('myAudio'+index,index)">
   <i :class="item.played?'el-icon-video-pause':'el-icon-video-play'"></i>
   <span>{{item.duration}}</span>
</div>

2.操作

/**
* 操作audio
*/ 
      audioClick(ref, index) {
        let _this = this
        let audio =this.$refs[ref] //获取组件
        if (this.list[index].audioStatus && this.list[index].audioStatus == 'playing') {
          //当前组件正在播放 则暂停播放
          _this.$set(this.list[index], 'played', false) //记录播放还是暂停的状态
          _this.$set(this.list[index], 'audioStatus', 'pause') //
          audio.pause()
        } else {
          //如果没有播放状态 则开始播放
          this.$set(this.list[index], 'played', true)
          this.$set(this.list[index], 'audioStatus', 'playing')
          audio.play()
          audio.addEventListener("ended", function () {  
            //监听播放播放结束后 重置播放状态为初始状态  
            _this.$set(_this.list[index], 'played', false)
            _this.$set(_this.list[index], 'audioStatus', 'pause')
            audio.pause()
          });
        }
      }

使用时用到的问题

在单页面使用时 用this.$refs[ref]去使用组件没有问题
在复用组件中使用会报错 this.$refs.myAudio0.play is not a function
所以 我换成了用ID去取 同时添加了获取audio时间

下面是我使用的完整的代码

<audio :id="'myAudio'+index" :src="audioSrc" @canplay="getDuration('myAudio'+index,index)"></audio>

<div class="audioControls" @click.stop="summaryAudioClick('myAudio'+index,index)">
    <i :class="item.played?'el-icon-video-pause':'el-icon-video-play'"></i>
    <span>{{item.duration}}</span>
</div>

/**
* 操作audio
*/ 
      audioClick(id, index) {
        let _this = this
        let audio = document.getElementById(id)  //获取当前操作的audio
        if (this.list[index].audioStatus && this.list[index].audioStatus == 'playing') {
          //当前组件正在播放 则暂停播放
          _this.$set(this.list[index], 'played', false) //记录播放还是暂停的状态
          _this.$set(this.list[index], 'audioStatus', 'pause') //
          audio.pause()
        } else {
          //如果没有播放状态 则开始播放
          this.$set(this.list[index], 'played', true)
          this.$set(this.list[index], 'audioStatus', 'playing')
          audio.play()
          audio.addEventListener("ended", function () {  
            //监听播放播放结束后 重置播放状态为初始状态  
            _this.$set(_this.list[index], 'played', false)
            _this.$set(_this.list[index], 'audioStatus', 'pause')
            audio.pause()
          });
        }
      },
      getDuration(id,index){
        let audio = document.getElementById(id)
        this.$set(this.list[index], 'duration', Math.round(audio.duration))
      }

初次加载未播放状态
点击播放之后状态 再次点击暂停回到初始状态 okkkkk