带音乐播放的vue组件

为了方便制作进度条引入第三方组件

这里用的是iview。用法自己参考文档。

下面开始实现播放功能

<div class="play">
			<!-- 这里是自定义的播放按钮 -->
          <div class="play-left">
            <img @click="player(idx)" :src="button" />
          </div>
          <!-- 进度条和时间显示 -->
          <div class="play-right">
            <Slider @on-change="sliderChange" @on-input="slider" v-model="songNow" :max="songTime"></Slider>
            <span class="time-left">{{time.now}}</span>
            <span class="time-right">{{time.time}}</span>
          </div>
          <!-- 真正的播放组件 -->
          <audio @timeupdate="timeUpdate" src="http://images.81dd.cn/5fc46995d0b34fbf9c85bc35f222dec0" ref="audio"></audio>
        </div>

audio标签是HTML的标签，不设置显示控件的话在页面是没有任何东西的。需要播放的时候就找到这个组件然后调用组件的方法。
@timeupdate方法可以在组件播放时候调用，用以更新进度条。
因为用了iview，所以要修改样式需要自己单独写一个css文件。因为那是属于另一个组件，在这个组件里的样式没有效果。

来源：CSDN

作者：sunyv1

链接：https://blog.csdn.net/sunyv1/article/details/103829669