微信小程序实现音频播放，带有点击上一首和下一首的功能

1.注册音频的Api

const innerAudioContext = wx.createInnerAudioContext();

2.需要用到数据

    exhibitList: [],  //资源列表audioSrc: null, //需要播放的音频资源iconUrl:null, //需要播放的音频的图片资源audioName:null, //需要播放音频的名称isPlayAudio: false,audioSeek: 0, //音频当前时间audioDuration: 0, //音频总时间showTime1: '00:00',showTime2: '00:00',durationIntval: 0,audioTime: 0, //进度条变化的值

3.监听页面卸载

onUnload: function () {//初始化音频播放参数this.setData({showTime1: '00:00',showTime2: '00:00',durationIntval: 0,audioTime: 0, //进度条变化的值isPlayAudio: false,audioSeek: 0, //音频当前时间isPlayAudio: false,})//音频播放停止innerAudioContext.stop()//卸载页面，清除计步器clearInterval(this.data.durationIntval);},

4.加载初始化

onLoad: function (options) {//初始化音频控件this.initAudio();this.loadaudio();},

5.点击单个资源播放

exhibitClick:function(e){let index=e.currentTarget.dataset.index;// console.log(this.data.exhibitList)var that = this;//获取音频资源链接let audiourl = this.data.exhibitList[index].audioUrl;// console.log(audiourl)let iconUrl = e.currentTarget.dataset.iconurl;let audioName = this.data.exhibitList[index].name;console.log(this.data.exhibitList[index])//判断当前音频是否为免费音频let isFree = e.currentTarget.dataset.isfree;let audioVipType = e.currentTarget.dataset.viptype;if (isFree == 1){//初始化播放参数this.setData({audioSrc: audiourl,index:index,iconUrl:iconUrl,audioName: audioName,showTime1: '00:00',showTime2: '00:00',durationIntval: 0,audioTime: 0, //进度条变化的值isPlayAudio: false,audioSeek: 0, //音频当前时间isPlayAudio: false,activeIndex:index,})this.playAudio();this.setData({showView:true})}},

6.点击下一首播放，有重复的代码，可以自己封装

handleLeft:function(){let that=this;let id= parseInt(that.data.index)  ;let num= id-1;console.log(num) if(num-1<-1){wx.showToast({title: '已到第一个',})}let aUrl=that.data.exhibitList[num].audioUrllet iUrl=that.data.exhibitList[num].iconUrl;// console.log(iUrl)let aName=that.data.exhibitList[num].name;let iFre=that.data.exhibitList[num].isFree;let AvipType=that.data.exhibitList[num].vipType;// console.log(aName,iFre,iUrl)if(iFre == 1){this.setData({audioSrc: aUrl,index:num,iconUrl:iUrl,audioName: aName,showTime1: '00:00',showTime2: '00:00',durationIntval: 0,audioTime: 0, //进度条变化的值isPlayAudio: false,audioSeek: 0, //音频当前时间isPlayAudio: false,activeIndex:num,})this.playAudio();this.setData({showView:true})}},

7.设置音频的url，以及过滤时间和当前的音频总时间

initAudio: function(){var t = this;//设置srcinnerAudioContext.src = this.data.audiosrc;innerAudioContext.onCanplay(() => {//初始化durationinnerAudioContext.durationsetTimeout(function () {//延时获取音频真正的durationvar 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)})},

8.设置拖动进度条

sliderChange:function (e) {var that = this;innerAudioContext.src = this.data.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 });// console.log(value)//拖动的时间//调用seek方法跳转歌曲时间innerAudioContext.seek(value);//播放歌曲innerAudioContext.play();},

9.播放暂停按钮设置

playAudio:function() {//获取播放状态和当前播放时间var isPlayAudio = this.data.isPlayAudio;// console.log(isPlayAudio)var seek = this.data.audioSeek;let animate=this.data.animateActive;innerAudioContext.pause();//更改播放状态this.setData({ isPlayAudio: !isPlayAudio ,animateActive:!animate})console.log(this.data.animateActive)if (isPlayAudio) {//如果在播放则记录播放的时间seek，暂停this.setData({ audioSeek: innerAudioContext.currentTime });// console.log(innerAudioContext.currentTime)} else {//如果在暂停，获取播放时间并继续播放innerAudioContext.src = this.data.audioSrc;if (innerAudioContext.duration != 0) {this.setData({ audioDuration: innerAudioContext.duration });}//跳转到指定时间播放innerAudioContext.seek(seek);innerAudioContext.play();}},

10.进度条与时间同步

loadaudio:function() {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);// console.log(time) //总时间为100//当歌曲在播放时，每隔一秒歌曲播放时间+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);// console.log(sec, min)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);},

微信小程序实现音频播放，带有点击上一首和下一首的功能相关推荐

微信小程序录音+音频播放（解决ios无法音频播放问题）
微信小程序录音+播放 1.创建全局变量 const audioManager = wx.getRecorderManager(): const innerAudioContext = wx.creat ...
微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...
微信小程序全局音频播放，实现分析
1. 需求分析育儿柚道小程序中有针对育儿教育提供的音频课程,主要包含读书.读文的音频内容. 1.1 功能需求课程音频:包含课程音频的地方有三处课程卡片,包含在 scrollview 中的试听内容 ...
微信小程序：音频播放器
由于产品需求,需要做一个自定义音频播放器,现在也差不多做完了,接下来呢,给大家分享一下,大家先来看看效果图哦~ 这里呢,我选择的是 wx.createInnerAudioContext 这个方法,大家 ...
简单实现微信小程序音乐音频播放的功能
效果图: 1)获取歌曲详情页的数据从每日推荐列表点击各歌曲跳转到歌曲详情页的时候,需要携带歌曲的id,在路由中把歌曲的id传到歌曲详情页的页面中使用(在wxml文件中通过data-id的形式把id传 ...
微信小程序实现音频播放
废话不多说直接上代码,亲测可用 Page({data: {isPlay: false,},onLoad() {this.audioPlay()},//创建语音示例进行播放createAudio(e) ...
微信小程序简易音频播放器（wx.getBackgroundAudioManager()）
开发工具:微信开发者工具源代码(百度网盘:)链接: 提取码:ldb9 注意:如果点击播放没反应,或者爆红,则需要更换js中的视频地址第一步.首先要在app.json里设置: "requi ...
android获取小程序音频时长,最新微信小程序获取音频时长与实时获取播放进度...
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...

微信小程序实现音频播放，带有点击上一首和下一首的功能

微信小程序实现音频播放，带有点击上一首和下一首的功能相关推荐

最新文章

热门文章