查看“微信小程序:音频API”的源代码
←
微信小程序:音频API
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==InnerAudioContext实例== 播放音频所需要创建的实例,可通过 wx.createInnerAudioContext 接口获取这个实例。注意,音频播放过程中,可能被系统中断,可通过 wx.onAudioInterruptionBegin、wx.onAudioInterruptionEnd事件来处理这种情况 https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html ===属性=== ====string src==== 音频资源的地址,用于直接播放。2.2.3 开始支持云文件ID ====number startTime==== 开始播放的位置(单位:s),默认为 0 ====number duration==== 当前音频的长度(单位 s)。只有在当前有合法的 src 时返回(只读) ====number currentTime==== 当前音频的播放位置(单位 s)。只有在当前有合法的 src 时返回,时间保留小数点后 6 位(只读) ===方法=== ====InnerAudioContext.play()==== 播放 ====InnerAudioContext.pause()==== 暂停。暂停后的音频再播放会从暂停处开始播放 ====InnerAudioContext.stop()==== 停止。停止后的音频再播放会从头开始播放。 ====InnerAudioContext.seek(number position)==== 跳转到指定位置 ==实训步骤== ===数据=== index.js: <nowiki> data: { src: 'https://downsc.chinaz.net/Files/DownLoad/sound1/201803/9825.mp3', poster: '/img/guonian2.jpg', name: '普通disco', author: '佚名', },</nowiki> ===预加载=== index.js: <nowiki> audioData: null, onLoad: function (options) { this.audioData =wx.createInnerAudioContext() this.audioData.src = this.data.src this.audioData.autoplay = true console.log(this.audioData) }, </nowiki> ===功能按钮=== <nowiki> <button bindtap='audioPlay'>播放</button> <button bindtap='audioPause'>暂停</button> <button bindtap='audioPlayBack'>回放测试</button> <button bindtap='audioStop'>结束</button> <button bindtap='audioStart'>回到开头</button> </nowiki> index.wxss: <nowiki> button{ margin:20rpx; } </nowiki> [[文件:wexin22020608.png|600px]] ===功能函数=== index.js: <nowiki> audioPlay() { this.audioData.play() console.log('播放') }, audioPause() { this.audioData.pause() console.log('暂停') }, audioPlayBack() { this.audioData.seek(this.audioData.currentTime-3) }, audioStop() { this.audioData.stop() }, audioStart() { this.audioData.seek(0) },</nowiki> ==代码示例== ===WXML=== <nowiki> //index.wxml <!--pages/index2/index2.wxml--> <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src3}}" id="myAudio" controls loop></audio> <button bindtap='audioPlay'>播放</button> <button bindtap='audioPause'>暂停</button> <button bindtap='audioPlayBack'>回放测试</button> <button bindtap='audioStop'>结束</button> <button bindtap='audioStart'>回到开头</button></nowiki> ===JS=== index.js: <nowiki>Page({ /** * 页面的初始数据 */ data: { src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46', poster: '../../imgs/pic.jpg', name: '普通disco', author: '佚名', src2:'../../music/light_emotion.mp3', src3: 'http://sc1.111ttt.cn:8282/2018/1/03m/13/396131229550.m4a?tflag=1546606800&pin=97bb2268ae26c20fe093fd5b0f04be80#.mp3', }, audioPlay() { this.audioData.play() console.log('播放') }, audioPause() { this.audioData.pause() console.log('暂停') }, audioPlayBack() { this.audioData.seek(this.audioData.currentTime-3) }, audioStop() { // this.audioData.stop() }, audioStart() { this.audioData.seek(0) }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { this.audioData =wx.createInnerAudioContext() this.audioData.src = this.data.src this.audioData.autoplay = false console.log(this.audioData) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { // this.audioData = wx.createAudioContext('myAudio') }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } }) </nowiki> 值得注意的是,<audio/>组件不再维护,可以使用能力更强的 wx.createInnerAudioContext接口.
返回至
微信小程序:音频API
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息