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

强大的howler.js

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

实现一个音乐播放器

下载howler

npm i howler

template代码

  
    
      
        播放
        暂停
        停止
      
      
        
          音量：
          
          静音
          解除静音
        
        
          播放速度：
          
            0.5
            1.0
            1.25
            1.5
            2.0
          
        
        
          播放进度条：
          
        
        上一首
        下一首
      
    
  

  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 = 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()
    }
  }

css

  .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
  }

demo演示地址

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