macao_army/macaoApplets/components/audio-play/audio-play.js

// components/audio-play.js
import { CDN_URL,API_BASE_URL } from '../../config/index';
var AllExample = [];
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    audio: {
      type: Object,
      value: {},
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    cdn_url:CDN_URL,
    durationTime: '00:00',
    currentTime: '00:00',
    isPlay: false,
    audioExample: null,
    progress: 0,
    allAudio: [],
    api_base_url:API_BASE_URL,
    targetUrl:API_BASE_URL+'/data/'
  },

  /**
   * 组件的方法列表
   */
  methods: {

    startMusic() {
      // 全部暂停
      AllExample.forEach(simpleAudio => {
        // console.log('simpleAudio', simpleAudio)
        simpleAudio.pause();
      })
      // this.data.audioExample.autoplay = true;
      // this.data.audioExample.src = this.data.targetUrl+this.properties.audio['audio'];
      // this.data.audioExample.play();
      // this.setData({
      //   isPlay: true
      // })
      // console.log('this.properties.audio', this.properties.audio)
      // console.log('this.data', this.data)
      // console.log('开始音乐')
      this.data.audioExample.autoplay = true;
      this.data.audioExample.src = this.data.targetUrl+this.properties.audio['audio'];
      this.data.audioExample.play();
      this.setData({
        isPlay: true
      })
      this.loadProgress()
    },
    // 播放中
    loadProgress() {
      this.data.audioExample.onCanplay((e) => {
        this.data.audioExample.duration; //必须写，不然获取不到。。。
        var timer = setInterval(() => {
          // 只要音频暂停了，定时器（假的）不执行
          if (this.data.audioExample.paused) return;
          var currentime = this.data.audioExample.currentTime;
          var duration = this.data.audioExample.duration;
          var currTimeStr = this.formatTime(currentime);
          var duraTimeStr = this.formatTime(duration);
          var progress = parseInt((this.data.audioExample.currentTime / this.data.audioExample.duration) * 100)
          // console.log('progress', progress)
          // console.log('this.data.progress', this.data.progress)
          if (progress === 100 || isNaN(this.data.progress)) {
            clearInterval(timer)
            console.log('停止了')
            this.setData({
              isPlay: false,
              progress: 0,
              currentTime: "00:00",
            })
          } else {
            // console.log('duraTimeStr', typeof duraTimeStr, duraTimeStr, !!duraTimeStr)
            // console.log('currTimeStr', typeof currTimeStr, currTimeStr, !!currTimeStr)
            // console.log('this.data.audioExample', this.data.audioExample, this.data.audioExample.paused)
            this.setData({
              progress,
              currentTime: currTimeStr,
              durationTime: duraTimeStr
            })
          }
        }, 1000);
      });
    },
    stopMusic() {
      this.data.audioExample.pause();
      console.log('结束音乐')
      this.setData({
        isPlay: false
      })
    },
    formatTime: function (num) { //格式化时间格式
      num = num.toFixed(0);
      let second = (num % 60);
      if (second < 10) second = '0' + second;
      let min = Math.floor(num / 60);
      if (min < 10) min = '0' + min;
      return min + ":" + second;
    }
  },
  attached: function () {
    //组件显示初始化函数
    console.log(3);
    var that = this;
    this.data.audioExample = wx.createInnerAudioContext();
    //所有组件实例都放在一个容器AllExample里
    AllExample.push(this.data.audioExample);
    this.data.audioExample.onPlay(function () {
      console.log('播放中。。。')
    })
    this.data.audioExample.onTimeUpdate(function () {
      console.log('监听进度。。')
    })
    //控制单个实例的isPlay
    this.data.audioExample.onPause(function () {
      that.setData({
        isPlay: false
      })
    })
    // 每个组件实例播放结束
    this.data.audioExample.onEnded(() => {
      this.setData({
        currentTime: "00:00",
        isPlay: false,
        progress: 0,
      })
      console.log('播放结束了')
    })
    // 在组件实例进入页面节点树时执行
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
    // 卸载
    this.data.audioExample.destroy();
    AllExample = [];
  }
})