微信小程序播放音频
发布时间：2018-01-02 09:03 所属栏目：小程序开发教程
今天做微信小程序涉及到播放音频文件：
使用audio标签来绑定音频路径
[html] view plain copy
- <audio id='audioid' src='{{vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>
目前没有做到播放下一首的功能，只有暂停和播放。
最上面的播放条是通过progress的percent来实现的，
[html] view plain copy
- <progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc" />
界面：
[html] view plain copy
- <view class="ub-ver info-container" style="height:5em;">
- <!-- 音频播放 -->
- <view class='ub fonts12 align-items-center' >
- <view>{{currentTime}}</view>
- <view class="umw-6"></view>
- <view class='ub-f1'>
- <progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc" />
- <!-- {{vidioUrl}} -->
- </view>
- <view class="umw-6"></view>
- <view>{{duration}}</view>
- </view>
- <audio id='audioid' src='{{vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>
- <view class='ub ub-f1 align-items-center' style="justify-content:center">
- <view class="icon-bofanglist align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/bofanglist.png') no-repeat;background-size: contain" bindtap="listClick">
- </view>
- <view class="umw1-5"></view>
- <view wx:if="{{flags}}" class="icon-play align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/pause.png') no-repeat;background-size: contain" bindtap="pause">
- </view>
- <view wx:if="{{flagp}}" class="icon-next align-items-center" style="background:url('../../images/zanting@3x.png') no-repeat;background-size: contain" bindtap="play">
- </view>
- <view class="umw1-5"></view>
- <view class="icon-next align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/next.png') no-repeat;background-size: contain">
- </view>
- </view>
- </view>
js文件：
[html] view plain copy
- onLoad: function (options) {
- var that = this;
- console.log("topicID" + options.infoId);
- wx.request({
- url: 'https://***********/' + *******,
- header: {
- 'content-type': 'application/json'
- },
- success: function (res) {
- that.setData({
- vidioUrl: res.data.data.videoUrl
- })
- }
- })
- //时间戳转换为时间日期格式
- function transDate(mescStr) {
- var n = mescStr;
- var date = new Date(n);
- var Y = date.getFullYear() + '-';
- var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
- var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
- return (Y + M + D)
- }
- },
- //以下是状态监听
- audioError: function (resp) {
- console.log(resp);
- },
- audioPlay: function (resp) {
- console.log(resp);
- console.log('开始播放');
- },
- playEnd: function (resp) {
- console.log(resp);
- console.log('播放结束');
- },
- timeUpdate: function (resp) {
- this.setData({
- currtRate: (100 * resp.detail.currentTime / resp.detail.duration),
- duration: (resp.detail.duration / 60).toPrecision(2),//总时长 保留两位
- currentTime: (resp.detail.currentTime / 60).toFixed(2)//toPrecision和toFixed的区别
- });
- // this.currentTime = resp.detail.currentTime;//当前时长
- // console.log(resp);
- },
- //以下是操作
- play: function () {
- this.audioContext.play();
- this.setData({
- flags:true,
- flagp:false
- })
- },
- pause: function () {
- this.audioContext.pause();
- this.setData({
- flags: false,
- flagp: true
- })
- },
- audioStart: function () {
- this.audioCtx.seek(0)//重新播放
- },
实现了音频的播放，对于下一首播放，目前没有头绪，刚接触两天，明天继续做
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
