使用howler做一个音频播放器到底有多简单

强大的howler.js

howler官网 https://howlerjs.com/
howler git地址 https://github.com/goldfire/howler.js

实现一个音乐播放器

下载howler

npm i howler

template代码

<template>
  <div class="video_test">
    <div class="player_audio" >
      <div>
        <button @click="play(true)" v-show="!playing">播放</button>
        <button @click="pause(true)" v-show="playing">暂停</button>
        <button @click="stop" v-show="playing">停止</button>
      </div>
      <div v-show="playing">
        <div>
          音量：
          <input type="range" min="0" max="1" step="0.1" v-model="volume"  @input="volumeChange" />
          <button @click="mute(true)" v-show="!muted">静音</button>
          <button @click="mute(false)" v-show="muted">解除静音</button>
        </div>
        <div>
          播放速度：
          <select @change="rateChange" v-model="rate">
            <option :value ="0.5">0.5</option>
            <option :value ="1.0">1.0</option>
            <option :value ="1.25">1.25</option>
            <option :value ="1.5">1.5</option>
            <option :value ="2.0">2.0</option>
          </select>
        </div>
        <div>
          播放进度条：
          <input type="range" v-model="value" min="0" max="100"  @drag-start="pause" @drag-end="play"  @input="change" />
        </div>
        <button @click="pre">上一首</button>
        <button @click="next">下一首</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {Howl} from 'howler'
  export default {
    name:'video-test',
    data() {
      return {
        rate: 1,
        volume: 1,
        audioSrc:[
          'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/%E6%B4%9B%E5%A4%A9%E4%BE%9D%20-%20%E4%B8%9C%E4%BA%AC%E4%B8%8D%E5%A4%AA%E7%83%AD.mp3',
          'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/French%20Kiss%20-%20Jealousy.mp3',
          'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/VIVI%20-%20%E5%BC%80%E5%BF%83%E5%BE%80%E5%89%8D%E9%A3%9E.mp3',
          'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/mp3/%E9%9D%92%E6%98%A5%E5%86%8D%E8%A7%81.mp3'
        ],
        value:0,
        timer:'',
        playing:false,
        currentIndex:0,
        muted:false
      }
    },
    components:{
      // slider
    },
    created() {
    },
    mounted(){
      this.audioPlayer()
    },
    methods: {
      audioPlayer(){
        let that = this
        this.sound = new Howl({
          src: this.audioSrc[this.currentIndex % this.audioSrc.length],
          autoplay: true,
          loop: true,
          volume: this.volume,
          html5: true,
          preload:true,
          rate:this.rate,
          mute:that.muted,
          onload() {
            console.log('onload!',this);
          },
          onplay() {
            that.playing = true
            //that.duration = that.formatTime(Math.round(this._duration));
            that.step()
            console.log('onload!',this);
          },
          onmute() {
            that.muted = this._muted
          },
          onpause() {
            that.playing = false
            that.cancelAF()
          },
          onstop() {
            that.playing = false
            that.setTimerAndValue()
            that.cancelAF()
          },
          onend() {
            console.log('end')
            that.cancelAF()
            that.next()
          },
        });

      },
      formatTime(secs) {
        let minutes = Math.floor(secs / 60) || 0;
        let seconds = (secs - minutes * 60) || 0;
        return minutes + ':' + (seconds < 10 ? '0': '') + seconds;
      },
      play(){
        this.sound.play();
      },
      pause(){
        this.sound.pause()
      },
      stop(){
        this.sound.stop()
      },
      volumeChange(e){
        this.sound.volume(e.target.value)
      },
      mute(boolean){
        this.sound.mute(boolean)
      },
      rateChange(e){
        this.sound.rate(e.target.value)
      },
      pre(){
        this.stop()
        this.currentIndex = this.currentIndex >= 1 ? this.currentIndex - 1 : 0
        this.audioPlayer(this.currentIndex)
        this.play()
      },
      next(){
        this.stop()
        this.currentIndex = this.currentIndex + 1
        this.audioPlayer(this.currentIndex)
        this.play()
      },
      setTimerAndValue(){

        let seek = this.sound.seek();
        if (typeof seek === 'number'){
          this.timer = this.formatTime(Math.round(seek));
          this.value = Math.round((seek / this.sound._duration) * 100) || 0
        }
      },
      step(){
        this.setTimerAndValue()
        this.s = requestAnimationFrame(this.step);
      },

      cancelAF(){
        cancelAnimationFrame(this.s)
      },
      change(e){
        this.sound.seek(this.sound._duration * e.target.value / 100);
        this.setTimerAndValue()
      },

    },
    beforeDestroy(){
      this.cancelAF()
    }
  }
</script>

css

<style scoped>
  .video_test{
    text-align: center;
  }
  .player_audio{
    display: inline-block;
    padding-bottom: 0.3rem;
    text-align: left;
  }
  .player_audio div{
    padding: 0.1rem 0.15rem
  }
</style>

demo演示地址

https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/test/music/index.html#/howler