Vue 使用 SoundManager 2 播放插件

该播放插件兼容安卓和ios端，可以播放好几种音频，能获取播放总时长和当前播放时间，还有设置播放的时间，详情可以到下面链接查看

http://www.schillmania.com/projects/soundmanager2/

文档我也看不太明白，这里放上一些做项目时用到的方法供大家参考：

创建播放实例：

var mySoundObject = soundManager.createSound({
      id: 'music',
      url: 'https://m3.8js.net//nc/su_yan-hu_song_22s.mp3',//歌曲链接
      autoLoad: true,//是否自动加载
      onload: function(){//加载时调用
        that.totalTime = that.formatMilliseconds(mySoundObject.duration);
      },
      whileplaying: function() {//播放时调用
        if(that.isClick){
          //调整播放进度
          soundManager.setPosition('music',that.positionTime)
          that.isClick = false
        }
        // 当前播放时间
        that.nowTime = that.formatMilliseconds(Math.floor(mySoundObject.position))
        // 播放进度（宽度）
        that.progressWidth = (mySoundObject.position / mySoundObject.duration) * 100 + '%' 
      },
      onfinish: function(){//播放完成时调用
        that.playing = !that.playing;
        that.playTime()
        // soundManager.destroySound('music');  //销毁音乐
      }
    })
    this.playing = !this.playing;
    //播放、暂停音乐
    this.playing
      ? mySoundObject.play()
      : mySoundObject.pause('music')

  // 点击控制进度条
  changeTime(e) {
    e.preventDefault()
    const progressBar = this.$refs.progressWrapper;
    const {left,width} = progressBar.getBoundingClientRect();
    const progressWidth = e.clientX - left
    this.progressWidth = progressWidth + 'px'
    this.updadteCurrentTime(progressWidth, width);
    this.isClick = true;
  },

  // 更新当前播放时间
  updadteCurrentTime(progressWidth, width) {
    this.positionTime = (progressWidth / width) * this.totalSecondsTime
    this.nowTime = this.formatMilliseconds(this.positionTime)
  },

如果进度条不能移动的话可能是后端返回的文件格式有问题，不能返回文件流，但是具体要怎么操作我也不清楚啦，可以去问后端哦~