打开播放音乐,时间在走,进度条不动,默认不自动播放音乐,只有点击暂停,再点击播放才能播放音乐,想要的效果是打开后自动播放音乐,点暂停后停止播放。
下面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 > |
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
开发工具版本号:1.02,在开发工具模拟器中测试
提供下能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
https://developers.weixin.qq.com/s/XMJumHmD7L8N
提供的代码片段用不了
可以运行的代码片段