微信小程序：音频播放器

由于产品需求，需要做一个自定义音频播放器，现在也差不多做完了，接下来呢，给大家分享一下，大家先来看看效果图哦~

这里呢，我选择的是 wx.createInnerAudioContext 这个方法，大家可以结合文档来看这篇文章哦~

wxml

<view class="audios"><view class="play_pause_btn" bindtap="stratPlay"><image class="btn" wx:if="{{!isplay}}" src="../../assets/image/correctAudios/play.png"></image><image class="btn" wx:else src="../../assets/image/correctAudios/pause.png"></image></view><view class="play_process"><view style="font-size: 22rpx;font-family:Helvetica;">{{startTime}}</view><view class="slider_out" style="width: {{selfSliderWidth}}"><slider data-offset="{{processLen}}" style="width: 95%;margin-left: 10rpx;" bindchange='sliderChange' bindtouchstart="handleSliderMoveStart" bindtouchend="handleSliderMoveEnd" value="{{processLen}}" min="0" max="100" step="1" activeColor='#000' block-size="12" backgroundColor="rgba(199,199,204,1)"/></view><view style="font-size: 22rpx;font-family:Helvetica;">{{endTime}}</view></view>
</view>

js: 1、初始化状态

data() {url: '',duration: '',myAudio: '',startTime: '00:00',endTime: '00:00',isplay: false,processLen: 0,isMovingSlider: false,
},
onReady(){this.data.myAudio = wx.createInnerAudioContext();this.data.myAudio.src = this.data.url;wx.setInnerAudioOption({  obeyMuteSwitch: false  })this.data.endTime = setTimes(this.data.duration);this.data.myAudio.seek(0);this.setData({isplay: false,startTime: '00:00',endTime: this.data.endTime,processLen: 0,})
}

js: 2、点击播放、暂停、以及播放的进度

this.data.isplay = !this.data.isplay;
if(this.data.isplay) {this.data.myAudio.play();setTimeout(() => {this.data.myAudio.paused;}, 200)} else { this.data.myAudio.pause();}this.setData({isplay: this.data.isplay})// 播放中...this.data.myAudio.onTimeUpdate(() => {if(!this.data.isMovingSlider) {let per = (this.data.myAudio.currentTime this.data.myAudio.duration) * 100;this.setData({startTime: setTimes(this.data.myAudio.currentTime),processLen: per})}})// 播放结束this.data.myAudio.onEnded(() => {this.setData({isplay: false,startTime: "00:00",processLen: 0})})// 播放出错this.data.myAudio.onError((err) => {console.log('audio error => ', err)})

js: 3、进度条的拖拽

 sliderChange(e) {let long = (e.detail.value * this.data.duration) / 100;this.data.myAudio.seek(long);this.data.myAudio.pause();setTimeout(() => {this.data.myAudio.play();})}, 500)this.setData({isplay: true,startTime: setTimes(long)})}
// 解决onTimeUpdate事件触发slider控件更新”和“手动拖动触发slider更新”冲突的问题handleSliderMoveStart() {this.setData({isMovingSlider: true});},handleSliderMoveEnd() {this.setData({isMovingSlider: false});}

js: 4、销毁音频实例

onUnload() {this.data.myAudio.destory()
}

wxss

.audios {display: flex;align-items: center;height: 88rpx;padding: 0 40rpx;margin: 0 auto;box-sizing: border-box;background:rgba(255,255,255,1);box-shadow: 2rpx 2rpx 12rpx 0rpx rgba(199,199,204,0.6);border-radius: 20rpx;
}
.audios .play_pause_btn {width: 40rpx;height: 44rpx;margin-right: 40rpx;
}
.play_pause_btn .btn{width: 100%;height: 100%;
}
.audios .play_process {flex: 1;display: flex;justify-content: space-between;align-items: center;
}

代码中所用到的setTimes方法

const setTimes = (value) => {let theTime = parseInt(value);//秒let theTime1 = 0;//分if(theTime > 60){theTime1 = parseInt(theTime / 60);theTime = parseInt(theTime % 60);if(theTime1 > 60) {  theTime1 = parseInt(theTime1 % 60);  }    }let theTime_y = parseInt(theTime);if(theTime_y < 10) {theTime_y = '0' + theTime_y   }let results = "" + theTime_y;if(theTime1 > 0 || theTime1 == 0) { let theTime1_y = parseInt(theTime1);if(theTime1_y < 10){theTime1_y = '0' + theTime1_y;} results = "" + theTime1_y + ":" + results;  }  return results;
}

嗯~，到这就写的差不多了，希望能够帮助大家，如若有地方不正确，还希望在评论区多多指出，或者私信小编哦，三克油

微信小程序：音频播放器相关推荐

微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...
微信小程序-音频播放-wx.createInnerAudioContext() 每次都是重复播放同一条录音
前言在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
微信小程序-音频播放每次都是重复播放同一条录音
前言在调试微信小程序音频播放时,刚开始我也是直接复制官方文档的实例: const innerAudioContext = wx.createInnerAudioContext() innerAudi ...
uniapp实现微信小程序音频播放倒计时的功能，类似微信语音条
uniapp实现微信小程序音频播放功能最近需要有个项目需要用到音频播放,第一个想到的是audio标签,但是查阅了uniapp官方文档,发现audio组件已经不维护了. 官网推荐使用uni.creat ...
微信小程序——音乐播放器
音乐播放器前言主页三个标签页推荐页播放器页播放列表页逻辑前言使用swiper组件完成三个标签页的切换,并且实现轮播图.scroll-view组件完成滚动视图,使用微信小程序提供的音乐 ...
（附源码）springboot+基于微信小程序音乐播放器的设计与实现毕业设计271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
微信小程序-音乐播放器
前言本文主要通过微信小程序的媒体API来实现一个简单的音乐播放器,主要实现的功能有音乐的切换.单曲循环.播放进度条的拖拽.播放与暂停和自定义音乐列表弹窗功能. 效果图主要目录文件 |--image ...
springboot+基于微信小程序音乐播放器的设计与实现毕业设计-附源码271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
01. 微信小程序音乐播放器
项目简介最近在学微信小程序,所以打算做一个音乐播放器的微信小程序. 项目需求(原型图) 这个是我做的原型图,比较简陋(有些界面直接用了网易云音乐小程序的截图,因为是仿着网易云音乐来做的) 首页播放 ...
计算机实战项目、毕业设计、课程设计之含论文+辩论PPT+源码等]微信小程序音乐播放器小程序+后台管理系统
音乐播放器平台+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离 ...

微信小程序：音频播放器

wxml

js: 1、初始化状态

js: 2、点击播放、暂停、以及播放的进度

js: 3、进度条的拖拽

js: 4、销毁音频实例

wxss

代码中所用到的setTimes方法

微信小程序：音频播放器相关推荐

最新文章

热门文章