微信小程序?qū)崿F(xiàn)錄音功能
更新時(shí)間:2019年11月22日 17:17:43 作者:煥想
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序錄音功能的具體代碼,供大家參考,具體內(nèi)容如下
release.wxml
<!--pages/index/release/release.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="microphone"> <image class="sound-style" src="/images/speak.png"></image> <image wx:if="{{j==2}}" class="sound-style" src="/images/speak.png"></image> <image wx:if="{{j==3}}" class="sound-style" src="/images/speak.png"></image> <image wx:if="{{j==4}}" class="sound-style" src="/images/speak.png"></image> <image wx:if="{{j==5}}" class="sound-style" src="/images/speak_end.png"></image> </view> <view class="record-style"> <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 錄音</button> </view>
release.wxss
/* pages/index/release/release.wxss */ .microphone{ position:fixed; left: 250rpx; bottom: 0; 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; }
release.js
// pages/index/release/release.js var app = getApp() Page({ data: { j: 1,//幀動(dòng)畫初始圖片 isSpeaking: false,//是否正在說話 voices: [],//音頻數(shù)組 }, onLoad: function () { }, //手指按下 touchdown: function () { console.log("手指按下了...") console.log("new date : " + new Date) var _this = this; speaking.call(this); this.setData({ isSpeaking: true }) //開始錄音 wx.startRecord({ success: function (res) { //臨時(shí)路徑,下次進(jìn)入小程序時(shí)無法正常使用 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('用戶點(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)擊開始播放 wx.showToast({ title: '開始播放', icon: 'success', duration: 1000 }) wx.playVoice({ filePath: filePath, success: function () { wx.showToast({ title: '播放結(jié)束', icon: 'success', duration: 1000 }) } }) } }) //麥克風(fēng)幀動(dòng)畫 function speaking() { var _this = this; //話筒幀動(dòng)畫 var i = 1; this.timer = setInterval(function () { i++; i = i % 5; _this.setData({ j: i }) }, 200); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序用戶后臺(tái)定位及錄音授權(quán)及請(qǐng)求示例
- 微信小程序?qū)崿F(xiàn)錄音與音頻播放功能
- 微信小程序?qū)崿F(xiàn)錄音Record功能
- 微信小程序錄音實(shí)現(xiàn)功能并上傳(使用node解析接收)
- 微信小程序?qū)崿F(xiàn)錄音時(shí)的麥克風(fēng)動(dòng)畫效果實(shí)例
- 微信小程序錄音文件格式silk遇到的問題及解決方法
- 微信小程序錄音與播放錄音功能
- 微信小程序開發(fā)之錄音機(jī) 音頻播放 動(dòng)畫實(shí)例 (真機(jī)可用)
- 微信小程序-圖片、錄音、音頻播放、音樂播放、視頻、文件代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)錄音播放錄音功能
相關(guān)文章
JavaScript實(shí)現(xiàn)自定義拖拽排序列表
在Web開發(fā)中,拖拽排序是一個(gè)常見的需求,它允許用戶通過拖拽的方式重新排列列表項(xiàng)的順序,本文將介紹如何使用原生JavaScript實(shí)現(xiàn)這一功能,需要的可以了解下2024-01-01js中判斷兩個(gè)數(shù)組對(duì)象是否完全相等
這篇文章主要介紹了js中判斷兩個(gè)數(shù)組對(duì)象是否完全相等方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04js 判斷js函數(shù)、變量是否存在的簡(jiǎn)單示例代碼
本篇文章主要是對(duì)判斷js函數(shù)、變量是否存在的簡(jiǎn)單示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03JavaScript表單通過正則表達(dá)式驗(yàn)證電話號(hào)碼
通過正則表達(dá)式實(shí)現(xiàn)判斷一個(gè)輸入量是否為電話號(hào)碼,需要的朋友可以參考下2014-03-03微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08Javascript原生ajax請(qǐng)求代碼實(shí)例
這篇文章主要介紹了Javascript原生ajax請(qǐng)求代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02