美文网首页
vuejs实现音频倍速播放

vuejs实现音频倍速播放

作者: 闪闪发光lucia | 来源:发表于2020-03-03 19:21 被阅读0次

    近来有一个实现音频倍速播放的需求,找了一圈都没有找到合适的并且满足我需求的插件,所以就用h5的video标签来实现项目需要的效果。

    技术栈:vuejs,element-ui

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .call-record-audio {
          margin-top: 10px;
        }
        .audio-time,
        .audio-speed {
          font-size: 14px;
          color: #333;
          margin-left: 10px;
          line-height: 38px;
          float: left;
        }
        .audio-speed {
          cursor: pointer;
        }
        .audio-slider {
          width: 500px;
          margin: 0 20px;
          float: left;
        }
        .audio-btn {
          line-height: 38px;
          float: left;
        }
        .audio-btn>i {
          font-size: 24px;
          color: #066EB7;
          vertical-align: middle;
        }
      </style>
    </head>
    
    <body>
      <div class="clearfix" id="audio">
        <audio autoplay="autoplay" ref="audioPlayer" preload="auto"
          src="http://wechatapppro-1252524126.file.myqcloud.com/appG1VMUALC2470/audio_compressed/1505377565_4fd15d83213bceb23a97ad6af45f1dae.mp3">
          你的浏览器不支持audio标签
        </audio>
        <span class="audio-btn">
          <!-- 播放 -->
          <i class="el-icon-video-play" @click="playAudio" v-show="!isPlay"></i>
          <!-- 暂停 -->
          <i class="el-icon-video-pause" @click="pauseAudio" v-show="isPlay"></i>
        </span>
        <!-- 时间进度/总时长 -->
        <span class="audio-time">{{audioCurrentTime}}/{{audioAllTime}}</span>
        <!-- 进度条 -->
        <div class="audio-slider">
          <el-slider v-model="audioPercentage" :show-tooltip="false" @change="handleChange"></el-slider>
        </div>
        <!-- 设置倍速 -->
        <el-dropdown size="small" @command="changeSpeed">
          <span class="audio-speed">倍速:{{speed}}X</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in multipleArray" :key="index" :command="item">
              {{item}}X
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 引入 Vue 文件 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
      <!-- 引入组件库 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        let vueApp = new Vue({
          el: '#audio',
          data() {
            return {
              audioPercentage: 0, // 音频进度百分比
              audioCurrentTime: '00:00',// 音频当前播放时间
              audioAllTime: '00:00', // 音频总播放时间
              audioAllDuration: 0, // 音频总播放秒数
              isPlay: false, // 是否正在播放
              multipleArray: [0.75, 1, 1.5, 2], // 倍速设置
              audioInterval: null, // 定时器
              speed: 1,
            }
          },
          methods: {
            /** 设置定时检测 */
            setAudioInterval() {
              this.audioInterval = setInterval(() => {
                this.getAudioTime();
                let audioPlayer = this.$refs.audioPlayer;
                if (audioPlayer.ended) {
                  // 播放结束后是否重置数据
                  // clearInterval(this.audioInterval);
                  // this.audioPercentage = 0;
                  // audioPlayer.currentTime = 0;
                  // this.audioCurrentTime = '00:00';
                  // this.isPlay = false;
                }
                audioPlayer.paused ? this.isPlay = false : this.isPlay = true
              }, 500)
            },
            /** 播放 */
            playAudio() {
              // 重设定时器
              clearInterval(this.audioInterval);
              this.getAudioTime();
              this.setAudioInterval();
              let audioPlayer = this.$refs.audioPlayer;
              audioPlayer.play();
              this.isPlay = true;
            },
            /** 暂停播放 */
            pauseAudio() {
              let audioPlayer = this.$refs.audioPlayer;
              audioPlayer.pause();
              this.isPlay = false;
            },
            /** 获取播放时间 */
            getAudioTime() {
              let audioPlayer = this.$refs.audioPlayer;
              this.audioAllTime = this.formatTime(audioPlayer.duration);
              this.audioAllDuration = audioPlayer.duration;
              this.audioCurrentTime = this.formatTime(audioPlayer.currentTime);
              //计算当前进度百分比
              this.audioPercentage = (audioPlayer.currentTime * 100 / audioPlayer.duration).toFixed(3);
              this.audioPercentage = Number(this.audioPercentage);
            },
            /** 滑动进度条 */
            handleChange(value) {
              // 设置播放时间
              let audioPlayer = this.$refs.audioPlayer;
              this.audioCurrentTime = this.formatTime(this.audioAllDuration * Number(value) / 100);
              const currentTime = Number(this.audioAllDuration * value / 100);
              audioPlayer.currentTime = parseInt(currentTime);
            },
            /** 设置倍速播放 */
            changeSpeed(command) {
              let audioPlayer = this.$refs.audioPlayer;
              audioPlayer.playbackRate = command;
              this.speed = command;
            },
            /** 时间格式话 */
            formatTime(second) {
              const secondType = typeof second
              if (secondType === 'number' || secondType === 'string') {
                second = parseInt(second)
                const hours = Math.floor(second / 3600);
                second = second - hours * 3600;
                second = second
                const mimute = Math.floor(second / 60)
                second = second - mimute * 60
                return ('0' + hours).slice(-2) + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
              } else {
                return '00:00'
              }
            },
          },
          mounted() {
            this.setAudioInterval();
          },
        })
      </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:vuejs实现音频倍速播放

          本文链接:https://www.haomeiwen.com/subject/deyklhtx.html