Browsing Category Uncategorized

小程序: wx.createInnerAudioContext以及用data绑定固定动态class

1.wx.createInnerAudioContext 小程序虽说不维护audio组件,但在1.6.6版本后就不再支持audio了,尤其在ios不能播放audio了,强制改用wx.createInnerAudioContext来播放audio。 譬如页面原先是使用audio播放音频,只要在wxml页面写下如下代码就可以执行: 在微信开发工具上是可以呈现的,但要是用真机是点击音频播放按钮是无效的。 所以下面要在js文件中使用wx.createInnerAudioContext来呈现音频的播放功能 (1).首先在wxml写下view或button或block,推荐用view 原理:在wxml文件中,需要有bindtap,主要是点击这个位置时候会响应js文件中audioPlay操作,所以在js文件中audioPlay来定义wx.createInnerAudioContext,如果你不需要监听音频事件,三行代码就可以了,但是一般都没有这么简单的操作逻辑。下面就介绍多个音频文件的class监听。 2.利用data绑定wxml中的固定class 如上图,如果你的页面有多个相同的class,如何利用js绑定音频文件和class? 在class中添加一个三目运算符,譬如上面的{{((!isplay)?’play’:’pause’)}},意思是if not play,class=”play”; else class=”pause”. 通过wxml中bindtap传递id=id=”0001.mp3″到js文件中audioPlay,利用innerAudioContext.src = ‘https://www.xxx.com/’ + event.currentTarget.id 来绑定音频文件,这样点击bindtap就可以播放这个固定id的音频了。 重点来了:因为使用wx.createInnerAudioContext在xml view中是不显示音频的,所以你就需要在view 的class=play或pause来background-image不同的音频按钮。 通过js文件中onPlay和onEended来监听音频的播放和停止,然后通过setData中isplay为true或false来传递给wxml中view class=”{{((!isplay)?’play’:’pause’)}}”。 但是wxml中<view class….是相同的,所以当data传递isPlay时候,点击一个音频,所有音频按钮都会改变,所以这个时候就需要绑定每个层的class,点击这个层bingtap其他层的class不变,通过引入num=id,然后setData num: event.currentTarget.id,如果wxml class={{(num==id) then执行isplay。完全代码如下: Referrence: AudioContext wx.createAudioContext(string id,…

Read More