微信小程序?qū)崿F(xiàn)播放音頻功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)播放音頻的具體代碼,供大家參考,具體內(nèi)容如下
功能描述:一進(jìn)頁面就會(huì)播放音樂,點(diǎn)擊暫停再次點(diǎn)擊后可以開始播放,退出頁面后播放停止。
HTML:
<view class="musicd"> ? ? <image src="/resource/images/mic1.png" wx:if="{{isPlay}}" bindtap="audioPause"></image> ? ? <image src="/resource/images/mic2.png" wx:else bindtap="audioPlay"></image> </view>
data:{ ?? ?isPlay: true, ? ? srcMic: 'zzzzz.mp3' } onLoad: function (t) { ?? ?this.audioPlay(); }, //播放語音 ? yuyinPlay: function (e) { ? ? let that = this ? ? //創(chuàng)建內(nèi)部 audio 上下文 InnerAudioContext 對(duì)象。 ? ? that.innerAudioContext = wx.createInnerAudioContext(); ? ? that.innerAudioContext.onError(function (res) { ? ? }) ? ? if ((that.data.srcMic == '') || (that.data.srcMic == undefined)) return; ? ? that.innerAudioContext.src = that.data.srcMic //設(shè)置音頻地址 ? ? this.innerAudioContext.play(); //播放音頻 ? }, ? //播放 ? audioPlay() { ? ? this.yuyinPlay(); ? ? this.setData({ ? ? ? isPlay: true ? ? }) ? }, ? // 停止播放 ? audioPause() { ? ? this.setData({ ? ? ? isPlay: false ? ? }) ? ? this.innerAudioContext.pause();//暫停音頻? ? }, ? // 結(jié)束語音 ? end: function (e) { ? ? let that = this ? ? if ((that.data.src) || (that.data.src != undefined)) return ? ? that.innerAudioContext.pause();//暫停音頻? ? }, ?onHide: function () { ? ? this.end();//暫停音頻 ? }, ? onUnload: function () { ? ? this.end();//暫停音頻 ? },
.musicd { ? position: fixed; ? z-index: 9999; ? top: 10%; ? left: 4%; } .musicd image { ? width: 100rpx; ? height: 100rpx; ? z-index: 999; }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)播放音頻
- 微信小程序?qū)崿F(xiàn)錄音與音頻播放功能
- 微信小程序?qū)崿F(xiàn)音頻文件播放進(jìn)度的實(shí)例代碼
- 微信小程序多音頻播放進(jìn)度條問題
- 微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度問題
- IOS中微信小程序播放緩存的音頻文件的方法
- 微信小程序page的生命周期和音頻播放及監(jiān)聽實(shí)例詳解
- 微信小程序開發(fā)之錄音機(jī) 音頻播放 動(dòng)畫實(shí)例 (真機(jī)可用)
- 微信小程序-圖片、錄音、音頻播放、音樂播放、視頻、文件代碼實(shí)例
- 微信小程序 audio音頻播放詳解及實(shí)例
相關(guān)文章
JS函數(shù)節(jié)流和函數(shù)防抖問題分析
這篇文章主要介紹了JS函數(shù)節(jié)流和函數(shù)防抖問題分析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12JS中國標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)化為年月日時(shí)分秒'yyyy-MM-dd hh:mm:ss'的示例詳解
這篇文章主要介紹了JS中國標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)化為年月日時(shí)分秒‘yyyy-MM-dd hh:mm:ss‘的相關(guān)知識(shí),通過示例代碼介紹了,Js各種時(shí)間轉(zhuǎn)換問題(YYYY-MM-DD 時(shí)間戳 中國標(biāo)準(zhǔn)時(shí)間),需要的朋友可以參考下2024-02-02IE8利用自帶的setCapture和releaseCapture解決iframe的拖拽事件方法
最近有個(gè)需求須要實(shí)現(xiàn)左右拖拽功能,頁面右邊是個(gè)iframe頁面,在chrome測(cè)試通過之后,發(fā)現(xiàn)在ie8上面效果不是很理想,查閱相關(guān)資料找到可以使用ie自帶的setCapture和releaseCapture來解決,需要的朋友可以參考下2016-10-10JavaScript(js)設(shè)置默認(rèn)輸入焦點(diǎn)(focus)
常常會(huì)在回復(fù)和引用里使用此功能,即單擊回復(fù)或引用,如讓輸入焦點(diǎn)出現(xiàn)在留言輸入框中,如果使用錨來定位,輸入焦點(diǎn)就不能激活了,需要了解的朋友可以參考下2012-12-12js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽的相關(guān)資料,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-05-05layer.confirm點(diǎn)擊第一個(gè)按鈕關(guān)閉彈出框的方法
今天小編就為大家分享一篇layer.confirm點(diǎn)擊第一個(gè)按鈕關(guān)閉彈出框的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09