公告列表
公告列表
收藏
回答

wx.createInnerAudioContext()自动播放问题

打开播放音乐，时间在走，进度条不动，默认不自动播放音乐，只有点击暂停，再点击播放才能播放音乐，想要的效果是打开后自动播放音乐，点暂停后停止播放。



下面js代码。

var config = require('../../config.js');
const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
Page({
  data: {
    siteurl: config.siteurl, //传递网址
 
    audiolist: [
      {
        audiosrc: '',
        coverimg: '',
      }
    ],
    isPlayAudio:  true,
    audioSeek: 0,
    audioDuration: 0,
    showTime1: '00:00',
    showTime2: '00:00',
    audioTime: 0
  },
  onLoad: function (options) {
    var classid = this;
    var id = this;
    var that = this;
    this.setData({
      id: options.id,
      classid:options.classid,
    })
    this.gainLoadingListData();
     //innerAudioContext.play();
    this.innerAudioContext.play();
     
     
 },
//获取数据
  gainLoadingListData: function () {
    var that = this;
    var classid = that.data.classid;
    var id = that.data.id;
    wx.request({
      url: config.apiurl + '/?api=listenStory/detail&id=' + id + '&classid=' + classid, //调用接口
      data: {
        'appid': config.appid, // 传递appid
        'timestamp': config.timestamp, // timestamp
        'signature': config.signature, // signature
      },
      method: 'GET',
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {
        console.log(res.data);
        var audiolist = that.data.audiolist;
        that.data.audiolist[0].audiosrc = res.data.data.content.mp3link;
         
        that.setData({
          newsdata: res.data.data.content,
        });
        var audiosrc = res.data.data.content.mp3link;
        var coverimg = res.data.data.content.titlepic;
        //设置页面标题//
        wx.setNavigationBarTitle({
          title: res.data.data.content.title
        })
    
       
      }
    })
  },
  onShow: function () {
    this.Initialization();
    this.loadaudio();
  },
  //初始化播放器，获取duration
  Initialization() {
    this.gainLoadingListData();
    var t = this;
    if (this.data.audiolist[0].audiosrc.length != 0) {
      //设置src
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      //运行一次
      innerAudioContext.play();
      innerAudioContext.pause();
      innerAudioContext.onCanplay(() => {
        //初始化duration
        innerAudioContext.duration
        setTimeout(function () {
          //延时获取音频真正的duration
          var duration = innerAudioContext.duration;
          var min = parseInt(duration / 60);
          var sec = parseInt(duration % 60);
          if (min.toString().length == 1) {
            min = `0${min}`;
          }
          if (sec.toString().length == 1) {
            sec = `0${sec}`;
          }
          t.setData({ audioDuration: innerAudioContext.duration, showTime2: `${min}:${sec}` });
        }, 1000)
      })
    }
  },
  //拖动进度条事件
  sliderChange(e) {
    var that = this;
    innerAudioContext.src = this.data.audiolist[0].audiosrc;
    //获取进度条百分比
    var value = e.detail.value;
    this.setData({ audioTime: value });
    var duration = this.data.audioDuration;
    //根据进度条百分比及歌曲总时间，计算拖动位置的时间
    value = parseInt(value * duration / 100);
    //更改状态
    this.setData({ audioSeek: value, isPlayAudio: true });
    //调用seek方法跳转歌曲时间
    innerAudioContext.seek(value);
    //播放歌曲
    innerAudioContext.play();
  },
  //播放、暂停按钮
  playAudio() {
    //获取播放状态和当前播放时间
    var isPlayAudio = this.data.isPlayAudio;
    var seek = this.data.audioSeek;
    
    innerAudioContext.play();
     
    //更改播放状态
    this.setData({ isPlayAudio: !isPlayAudio })
    if (isPlayAudio) {
      //如果在播放则记录播放的时间seek，暂停
      this.setData({ audioSeek: innerAudioContext.currentTime });
    } else {
      //如果在暂停，获取播放时间并继续播放
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      if (innerAudioContext.duration != 0) {
        this.setData({ audioDuration: innerAudioContext.duration });
      }
      //跳转到指定时间播放
      innerAudioContext.seek(seek);
      innerAudioContext.play();
    }
  },
  loadaudio() {
    var that = this;
    //设置一个计步器
    this.data.durationIntval = setInterval(function () {
      //当歌曲在播放时执行
      if (that.data.isPlayAudio == true) {
        //获取歌曲的播放时间，进度百分比
        var seek = that.data.audioSeek;
        var duration = innerAudioContext.duration;
        var time = that.data.audioTime;
        time = parseInt(100 * seek / duration);
        //当歌曲在播放时，每隔一秒歌曲播放时间+1，并计算分钟数与秒数
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        //填充字符串，使3:1这种呈现出 03：01 的样式
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        var min1 = parseInt(duration / 60);
        var sec1 = parseInt(duration % 60);
        if (min1.toString().length == 1) {
          min1 = `0${min1}`;
        }
        if (sec1.toString().length == 1) {
          sec1 = `0${sec1}`;
        }
        //当进度条完成，停止播放，并重设播放时间和进度条
        if (time >= 100) {
          innerAudioContext.stop();
          that.setData({ audioSeek: 0, audioTime: 0, audioDuration: duration, isPlayAudio: false, showTime1: `00:00` });
          return false;
        }
        //正常播放，更改进度信息，更改播放时间信息
        that.setData({ audioSeek: seek + 1, audioTime: time, audioDuration: duration, showTime1: `${min}:${sec}`, showTime2: `${min1}:${sec1}` });
      }
    }, 1000);
  },
  onUnload: function () {
    //卸载页面，清除计步器
    clearInterval(this.data.durationIntval);
  }
})



WXML代码


<view class='audioPlayer'>
  <view class='player'>
   <!-- <image src='{{audiolist[0].coverimg}}' class='audioBack'></image>-->
    <image src='../../images/pay_img.png' class='audioBack'></image>
    <view>{{newsdata.title}}</view>
    
  </view>
</view>
 <view class='audioControls'>
      <view class='flex'>
        <view class='bottom' catchtap='playAudio'>
          <!-- 按钮 -->
          <view wx:if="{{isPlayAudio}}">
            <image src='../../images/pause.png' />
          </view>
          <view wx:else>
            <image src='../../images/play.png' />
          </view>
        </view>
        <view class='slider'>
          <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' />
        </view>
        <view class='time'>
          {{showTime1}}/{{showTime2}}
        </view>
      </view>
  </view>





最后一次编辑于  2019-05-27
回答关注问题邀请回答
收藏

1 个回答

请 登录 后发表内容
相关问题
相关文档