您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序開(kāi)發(fā)錄音機(jī)、音頻播放、動(dòng)畫(huà)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1.為了進(jìn)來(lái)看得清楚.剛開(kāi)始沒(méi)有加載音頻列表.代碼往前挪一挪即可.
2.按住 錄音按鈕的時(shí)候會(huì)出現(xiàn)麥克風(fēng).中間的麥克風(fēng)是個(gè)幀動(dòng)畫(huà).
其實(shí)就是用js控制圖片顯示隱藏.沒(méi)啥好說(shuō)的.這里值得說(shuō)一說(shuō)的是錄音.微信的錄音API后,如果錄音時(shí)間太短,會(huì)錄音失敗.所以fail的時(shí)候還是需要處理一下.錄音時(shí)間的限制和微信語(yǔ)音是一樣的.60秒.
3.我在錄音完成后才加載列表.
下圖就是從微信存儲(chǔ)的文件里獲取到的列表信息.有儲(chǔ)存路徑,創(chuàng)建時(shí)間,文件大小.
這里的文件可能不只是音頻.這里我沒(méi)做判斷.下面的路徑都是wx:file//store_...
我也去找了下.在Tencent/micromsg/wxafiles/wx..../這一級(jí)目錄就能找到了.
時(shí)間是格式化之后的.文件大小是B,轉(zhuǎn)成KB如下.
手機(jī)目錄如下.但是打開(kāi)之后播放不了.目前原因不明.
下面是文件全名稱(chēng).
1.tempFilePath : 錄音之后的臨時(shí)文件.第二次進(jìn)入小程序就不能正常使用了.
2.savedFilePath :持久保存的文件路徑.值得注意的是微信只給100M的儲(chǔ)存空間.還是盡早上傳到后臺(tái)吧.
4.播放錄音音頻.
點(diǎn)擊item就能聽(tīng)到你的聲音了.別被自己嚇住.哈哈.
上代碼:
1.index.wxml
<!--index.wxml--> <scroll-view> <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;"> <block wx:for="{{voices}}"> <view class="board"> <view class="cell" > <view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay" > <view class="date">存儲(chǔ)路徑:{{item.filePath}}</view> <view class="date" >存儲(chǔ)時(shí)間:{{item.createTime}}</view> <view class="date">音頻大小:{{item.size}}KB</view> </view> </view> </view> </block> </view> </scroll-view> <view wx:if="{{isSpeaking}}" class="speak-style"> <image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image> <image wx:if="{{j==2}}" class="sound-style" src="../images/voice_icon_speech_sound_2.png" ></image> <image wx:if="{{j==3}}" class="sound-style" src="../images/voice_icon_speech_sound_3.png" ></image> <image wx:if="{{j==4}}" class="sound-style" src="../images/voice_icon_speech_sound_4.png" ></image> <image wx:if="{{j==5}}"class="sound-style" src="../images/voice_icon_speech_sound_5.png" ></image> </view> <view class="record-style"> <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 錄音</button> </view>
2.index.wxss
/**index.wxss**/ .speak-style{ position: relative; height: 240rpx; width: 240rpx; border-radius: 20rpx; margin: 50% auto; background: #26A5FF; } .item-style{ margin-top: 30rpx; margin-bottom: 30rpx; } .text-style{ text-align: center; } .record-style{ position: fixed; bottom: 0; left: 0; height: 120rpx; width: 100%; } .btn-style{ margin-left: 30rpx; margin-right: 30rpx; } .sound-style{ position: absolute; width: 74rpx; height:150rpx; margin-top: 45rpx; margin-left: 83rpx; } .board { overflow: hidden; border-bottom: 2rpx solid #26A5FF; } /*列布局*/ .cell{ display: flex; margin: 20rpx; } .cell-hd{ margin-left: 10rpx; color: #885A38; } .cell .cell-bd{ flex:1; position: relative; } /**只顯示一行*/ .date{ font-size: 30rpx; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; }
3.index.js
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { j: 1,//幀動(dòng)畫(huà)初始圖片 isSpeaking: false,//是否正在說(shuō)話(huà) voices: [],//音頻數(shù)組 }, onLoad: function () { }, //手指按下 touchdown: function () { console.log("手指按下了...") console.log("new date : " + new Date) var _this = this; speaking.call(this); this.setData({ isSpeaking: true }) //開(kāi)始錄音 wx.startRecord({ success: function (res) { //臨時(shí)路徑,下次進(jìn)入小程序時(shí)無(wú)法正常使用 var tempFilePath = res.tempFilePath console.log("tempFilePath: " + tempFilePath) //持久保存 wx.saveFile({ tempFilePath: tempFilePath, success: function (res) { //持久路徑 //本地文件存儲(chǔ)的大小限制為 100M var savedFilePath = res.savedFilePath console.log("savedFilePath: " + savedFilePath) } }) wx.showToast({ title: '恭喜!錄音成功', icon: 'success', duration: 1000 }) //獲取錄音音頻列表 wx.getSavedFileList({ success: function (res) { var voices = []; for (var i = 0; i < res.fileList.length; i++) { //格式化時(shí)間 var createTime = new Date(res.fileList[i].createTime) //將音頻大小B轉(zhuǎn)為KB var size = (res.fileList[i].size / 1024).toFixed(2); var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size }; console.log("文件路徑: " + res.fileList[i].filePath) console.log("文件時(shí)間: " + createTime) console.log("文件大小: " + size) voices = voices.concat(voice); } _this.setData({ voices: voices }) } }) }, fail: function (res) { //錄音失敗 wx.showModal({ title: '提示', content: '錄音的姿勢(shì)不對(duì)!', showCancel: false, success: function (res) { if (res.confirm) { console.log('用戶(hù)點(diǎn)擊確定') return } } }) } }) }, //手指抬起 touchup: function () { console.log("手指抬起了...") this.setData({ isSpeaking: false, }) clearInterval(this.timer) wx.stopRecord() }, //點(diǎn)擊播放錄音 gotoPlay: function (e) { var filePath = e.currentTarget.dataset.key; //點(diǎn)擊開(kāi)始播放 wx.showToast({ title: '開(kāi)始播放', icon: 'success', duration: 1000 }) wx.playVoice({ filePath: filePath, success: function () { wx.showToast({ title: '播放結(jié)束', icon: 'success', duration: 1000 }) } }) } }) //麥克風(fēng)幀動(dòng)畫(huà) function speaking() { var _this = this; //話(huà)筒幀動(dòng)畫(huà) var i = 1; this.timer = setInterval(function () { i++; i = i % 5; _this.setData({ j: i }) }, 200); }
注意:
1.錄音的音頻默認(rèn)是存在本地的臨時(shí)路徑下.第二次進(jìn)入小程序無(wú)法正常使用,可以存持久,但是本地文件大小的限制是100M,最好還是上傳后臺(tái).
2.錄音的時(shí)間不能太短.否則會(huì)失敗;也不能超過(guò)60秒.到了60秒會(huì)自動(dòng)停止錄音.
3.音頻播放不能同時(shí)播放多個(gè)音頻.看文檔.微信小程序 播放音頻文檔
1.為了進(jìn)來(lái)看得清楚.剛開(kāi)始沒(méi)有加載音頻列表.代碼往前挪一挪即可.
2.按住 錄音按鈕的時(shí)候會(huì)出現(xiàn)麥克風(fēng).中間的麥克風(fēng)是個(gè)幀動(dòng)畫(huà).
其實(shí)就是用js控制圖片顯示隱藏.沒(méi)啥好說(shuō)的.這里值得說(shuō)一說(shuō)的是錄音.微信的錄音API后,如果錄音時(shí)間太短,會(huì)錄音失敗.所以fail的時(shí)候還是需要處理一下.錄音時(shí)間的限制和微信語(yǔ)音是一樣的.60秒.
3.我在錄音完成后才加載列表.
下圖就是從微信存儲(chǔ)的文件里獲取到的列表信息.有儲(chǔ)存路徑,創(chuàng)建時(shí)間,文件大小.
這里的文件可能不只是音頻.這里我沒(méi)做判斷.下面的路徑都是wx:file//store_...
我也去找了下.在Tencent/micromsg/wxafiles/wx..../這一級(jí)目錄就能找到了.
時(shí)間是格式化之后的.文件大小是B,轉(zhuǎn)成KB如下.
手機(jī)目錄如下.但是打開(kāi)之后播放不了.目前原因不明.
下面是文件全名稱(chēng).
1.tempFilePath : 錄音之后的臨時(shí)文件.第二次進(jìn)入小程序就不能正常使用了.
2.savedFilePath :持久保存的文件路徑.值得注意的是微信只給100M的儲(chǔ)存空間.還是盡早上傳到后臺(tái)吧.
4.播放錄音音頻.
點(diǎn)擊item就能聽(tīng)到你的聲音了.別被自己嚇住.哈哈.
上代碼:
1.index.wxml
<!--index.wxml--> <scroll-view> <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;"> <block wx:for="{{voices}}"> <view class="board"> <view class="cell" > <view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay" > <view class="date">存儲(chǔ)路徑:{{item.filePath}}</view> <view class="date" >存儲(chǔ)時(shí)間:{{item.createTime}}</view> <view class="date">音頻大小:{{item.size}}KB</view> </view> </view> </view> </block> </view> </scroll-view> <view wx:if="{{isSpeaking}}" class="speak-style"> <image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image> <image wx:if="{{j==2}}" class="sound-style" src="../images/voice_icon_speech_sound_2.png" ></image> <image wx:if="{{j==3}}" class="sound-style" src="../images/voice_icon_speech_sound_3.png" ></image> <image wx:if="{{j==4}}" class="sound-style" src="../images/voice_icon_speech_sound_4.png" ></image> <image wx:if="{{j==5}}"class="sound-style" src="../images/voice_icon_speech_sound_5.png" ></image> </view> <view class="record-style"> <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 錄音</button> </view>
2.index.wxss
/**index.wxss**/ .speak-style{ position: relative; height: 240rpx; width: 240rpx; border-radius: 20rpx; margin: 50% auto; background: #26A5FF; } .item-style{ margin-top: 30rpx; margin-bottom: 30rpx; } .text-style{ text-align: center; } .record-style{ position: fixed; bottom: 0; left: 0; height: 120rpx; width: 100%; } .btn-style{ margin-left: 30rpx; margin-right: 30rpx; } .sound-style{ position: absolute; width: 74rpx; height:150rpx; margin-top: 45rpx; margin-left: 83rpx; } .board { overflow: hidden; border-bottom: 2rpx solid #26A5FF; } /*列布局*/ .cell{ display: flex; margin: 20rpx; } .cell-hd{ margin-left: 10rpx; color: #885A38; } .cell .cell-bd{ flex:1; position: relative; } /**只顯示一行*/ .date{ font-size: 30rpx; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; }
3.index.js
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { j: 1,//幀動(dòng)畫(huà)初始圖片 isSpeaking: false,//是否正在說(shuō)話(huà) voices: [],//音頻數(shù)組 }, onLoad: function () { }, //手指按下 touchdown: function () { console.log("手指按下了...") console.log("new date : " + new Date) var _this = this; speaking.call(this); this.setData({ isSpeaking: true }) //開(kāi)始錄音 wx.startRecord({ success: function (res) { //臨時(shí)路徑,下次進(jìn)入小程序時(shí)無(wú)法正常使用 var tempFilePath = res.tempFilePath console.log("tempFilePath: " + tempFilePath) //持久保存 wx.saveFile({ tempFilePath: tempFilePath, success: function (res) { //持久路徑 //本地文件存儲(chǔ)的大小限制為 100M var savedFilePath = res.savedFilePath console.log("savedFilePath: " + savedFilePath) } }) wx.showToast({ title: '恭喜!錄音成功', icon: 'success', duration: 1000 }) //獲取錄音音頻列表 wx.getSavedFileList({ success: function (res) { var voices = []; for (var i = 0; i < res.fileList.length; i++) { //格式化時(shí)間 var createTime = new Date(res.fileList[i].createTime) //將音頻大小B轉(zhuǎn)為KB var size = (res.fileList[i].size / 1024).toFixed(2); var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size }; console.log("文件路徑: " + res.fileList[i].filePath) console.log("文件時(shí)間: " + createTime) console.log("文件大小: " + size) voices = voices.concat(voice); } _this.setData({ voices: voices }) } }) }, fail: function (res) { //錄音失敗 wx.showModal({ title: '提示', content: '錄音的姿勢(shì)不對(duì)!', showCancel: false, success: function (res) { if (res.confirm) { console.log('用戶(hù)點(diǎn)擊確定') return } } }) } }) }, //手指抬起 touchup: function () { console.log("手指抬起了...") this.setData({ isSpeaking: false, }) clearInterval(this.timer) wx.stopRecord() }, //點(diǎn)擊播放錄音 gotoPlay: function (e) { var filePath = e.currentTarget.dataset.key; //點(diǎn)擊開(kāi)始播放 wx.showToast({ title: '開(kāi)始播放', icon: 'success', duration: 1000 }) wx.playVoice({ filePath: filePath, success: function () { wx.showToast({ title: '播放結(jié)束', icon: 'success', duration: 1000 }) } }) } }) //麥克風(fēng)幀動(dòng)畫(huà) function speaking() { var _this = this; //話(huà)筒幀動(dòng)畫(huà) var i = 1; this.timer = setInterval(function () { i++; i = i % 5; _this.setData({ j: i }) }, 200); }
注意:
1.錄音的音頻默認(rèn)是存在本地的臨時(shí)路徑下.第二次進(jìn)入小程序無(wú)法正常使用,可以存持久,但是本地文件大小的限制是100M,最好還是上傳后臺(tái).
2.錄音的時(shí)間不能太短.否則會(huì)失敗;也不能超過(guò)60秒.到了60秒會(huì)自動(dòng)停止錄音.
3.音頻播放不能同時(shí)播放多個(gè)音頻.看文檔.微信小程序 播放音頻文檔
以上是“微信小程序開(kāi)發(fā)錄音機(jī)、音頻播放、動(dòng)畫(huà)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。