|
今天做微信小程序涉及到播放音频文件：
使用audio标签来绑定音频路径
-
<audio id='audioid' src='{{vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>
目前没有做到播放下一首的功能，只有暂停和播放。
最上面的播放条是通过progress的percent来实现的，
-
<progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc" />
通过currtRate来实现播放条的已播放长度
界面：
-
<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" />
-
-
</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文件：
-
onLoad: function (options) {
-
var that =
邀请
原作者: 模板之家
来自: 网络收集
| 
