用VUE手撸一个音乐播放控件

最新推荐文章于 2024-08-08 08:28:41 发布

冰sir2021

最新推荐文章于 2024-08-08 08:28:41 发布

阅读量701

点赞数 2

分类专栏：前端随笔文章标签： vue 前端 html5

本文链接：https://blog.csdn.net/libingxit/article/details/120020950

版权

前端随笔专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在H5页面中使用vant UI库创建一个带有播放/暂停控制、进度条和实时时间显示的音频播放器。重点讲解了音频对象的创建、事件处理（如loadstart、loadeddata、timeupdate和ended）以及如何同步显示和操作。

摘要由CSDN通过智能技术生成

由于公司业务需要，需要在H5页面中播放音频。根据提供的UX大概是这个样子的

分析一下主要功能：
1、点击左侧按钮可以控制音频的播放和暂停。
2、时间随着音乐的播放实时变化，同时需要显示总时间。
3、中间进度条，随着音乐播放实时变化，另外用户主动拖动，可以拖动到对应时间位置。
基于以上需求，先进行UI的绘制，由于项目中使用了vant UI框架，所以拖动条直接用vant中的slider滑块即可
h5代码如下

<div class="player">
    <div class="button-control" @click="playOrPause">
      <van-icon name="play-circle-o" v-if="!status" />
      <van-icon name="pause-circle-o" v-else />
    </div>
    <div class="time-box">{{ currentStringTime }}/{{ totalStringTime }}</div>
    <div class="controler">
      <van-slider
        :max="totalTime"
        bar-height="2"
        button-size="17"
        inactive-color="#666666"
        v-model="timeNow"
        @change="onChange"
      />
    </div>
    <div class="more">
      <van-icon name="ellipsis" />
    </div>
  </div>

由于本项目中不会太频繁的进行开始和暂停的转换，因此使用了v-if来控制两个按钮的切换，如果经常需要暂停和播放的控制，建议使用v-show属性。
在HTML5中，一般使用书写音频播放，但是本项目中因为没有使用htm中的UI，所以可以直接用js中的代码来生成音频对象：

mounted() {
    this.audioObject = new Audio(this.audioSrc);
    ...
}

audioSrc通过子控件的props对象中定义，这样父元素可以通过该属性将音频的链接出入。

<audio-player audioSrc="https://mp32.9ku.com/upload/128/2020/05/18/1004197.mp3">
</audio-player>

在audio对象中，对应几个媒体的特有事件，本项目中主要用到了：
loadstart ---------------------------------->对应开始加载音频事件
laodeddata ------------------------------->加载完毕相应该事件
timeupdate ------------------------------->事件改变相应该事件
ended -------------------------------------->播放完毕响应该事件
在音频加载完成时，通过audio对象的duration属性，可以获取音频的总时长；
当事件更新时，通过audio对象的currentTime属性，可以获取当前播放的时间参数，用于显示，由于播放控件中的时间是按照秒更新的，因此在取整后秒没有更新可以不用改变数据，来提高效率。

    let that = this;
    this.audioObject.addEventListener("loadstart", function() {
      //that.$toast("loadstart");
    });
    this.audioObject.addEventListener("loadeddata", function() {
      //console.log("loadeddata");
      that.totalTime = parseInt(that.audioObject.duration);
    });
    this.audioObject.addEventListener("timeupdate", function() {
      let tempSecond = parseInt(that.audioObject.currentTime);
      if (that.timeNow != tempSecond) {
        that.timeNow = tempSecond;
      }
    });
    this.audioObject.addEventListener("ended", function() {
      that.status = false;
      that.timeNow = 0;
    });

其他函数：

    onChange(value) {
      this.audioObject.currentTime = value;
    },
    playOrPause() {
      if (this.status) {
        this.audioObject.pause();
        this.status = false;
      } else {
        this.audioObject.play();
        this.status = true;
      }
    },
    getStringTime(time) {
      let minute = parseInt(time / 60);
      if (minute < 10) {
        minute = "0" + minute;
      }
      let second = parseInt(time % 60);
      if (second < 10) {
        second = "0" + second;
      }
      return minute + ":" + second;
    }

当拖动进度条时，响应控件中的onChange(value)方法，通过将audio对象中的currentTime设置为当前的数值，实现时间显示和播放进度及进度条三者位置的统一
用status来标识当前是否播放的状态，通过点击播放/暂停按钮调用playOrPause函数，来控制状态和播放，audio对象中的play()和pause()方法对应音频的播放和暂停功能。
getStringTime方法，用来优化时间的显示，通过分钟和秒数来标识，单位数的前边加0是显示效果更好一些，在页面上的实时时间显示可以通过计算属性来标识。