微信小程序錄音與播放錄音功能

更新時(shí)間：2017年12月25日 09:35:54 投稿：mrr

這篇文章主要介紹了微信小程序錄音與播放錄音功能,小程序中提供了兩種錄音的API，舊版本錄音功能和新版錄音功能，需要的朋友可以參考下

小程序中提供了兩種錄音的API

舊版錄音功能

首先啟動(dòng)錄音，然后停止錄音即可拉到音頻的臨時(shí)地址

啟動(dòng)錄音：

var that = this;
  wx.startRecord({
   success: function (res) {
    // 調(diào)用了停止錄音接口就會(huì)觸發(fā)這個(gè)函數(shù)，res.tempFilePath為錄音文件臨時(shí)路徑
    var tempFilePath = res.tempFilePath
    that.setData({
     src: tempFilePath
    })
   },
   fail: function (res) {
    //錄音失敗的處理函數(shù)
   }
  })

停止錄音：

wx.stopRecord()

播放錄音：

wx.playVoice({
 filePath: src // src可以是錄音文件臨時(shí)路徑
})

新版錄音

獲取全局唯一的錄音管理器，然后錄音都依賴他，而播放錄音則需要內(nèi)部 audio 上下文 innerAudioContext 對(duì)象。

獲取全局唯一的錄音管理器：

var that = this;
  this.recorderManager = wx.getRecorderManager();
  this.recorderManager.onError(function(){
   // 錄音失敗的回調(diào)處理
  });
  this.recorderManager.onStop(function(res){
   // 停止錄音之后，把錄取到的音頻放在res.tempFilePath
   that.setData({
    src: res.tempFilePath 
   })
   console.log(res.tempFilePath )
  });

開(kāi)始錄音：

this.recorderManager.start({
   format: 'mp3' // 如果錄制acc類型音頻則改成aac
});

結(jié)束錄音：

this.recorderManager.stop()

播放音頻：

this.innerAudioContext = wx.createInnerAudioContext();
  this.innerAudioContext.onError((res) => {
   // 播放音頻失敗的回調(diào)
  })
  this.innerAudioContext.src = this.data.src; // 這里可以是錄音的臨時(shí)路徑
  this.innerAudioContext.play()

DEMO地址

github: https://github.com/yubang/appletRecordDemo

總結(jié)

以上所述是小編給大家介紹的微信小程序錄音與播放錄音功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript 注冊(cè)事件代碼
最基本的寫法，然后實(shí)現(xiàn)Js和HTML的分離，然后又實(shí)現(xiàn)對(duì)同一個(gè)元素注冊(cè)多個(gè)事件，期間，我們發(fā)現(xiàn)注冊(cè)事件的兼容性問(wèn)題。最后我們對(duì)注冊(cè)事件的方法進(jìn)行封裝，方便以后使用。
2011-01-01
javascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈
下面小編就為大家?guī)?lái)一篇javascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
JavaScript惰性載入函數(shù)實(shí)例分析
這篇文章主要介紹了JavaScript惰性載入函數(shù),結(jié)合實(shí)例形式分析了JavaScript惰性載入函數(shù)的概念、原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-03-03
js編碼之encodeURIComponent使用介紹(asp,php)
因此對(duì)于JS腳本又重新研究了一下。在對(duì)新的URL編碼的時(shí)候發(fā)現(xiàn)，網(wǎng)頁(yè)編碼的格式對(duì)于JS的影響很大，在這里書寫一點(diǎn)
2012-03-03
Bootstrap3多級(jí)下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap3多級(jí)下拉菜單的相關(guān)資料，需引用bootstrap.min.css和bootstrap.min.css.js，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實(shí)例形式分析了微信小程序使用wx.setNavigationBarTitle接口動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
BootStrapTable服務(wù)器分頁(yè)實(shí)例解析
項(xiàng)目中經(jīng)常會(huì)使用到表格，數(shù)據(jù)量大的時(shí)候還需要進(jìn)行分頁(yè)，項(xiàng)目設(shè)計(jì)階段，我選擇了bootstrapTable的js插件，個(gè)人覺(jué)得這個(gè)框架非常好用，支持服務(wù)器端分頁(yè)，此篇主要寫的主要是關(guān)于服務(wù)器分頁(yè),需要的朋友可以參考下
2016-12-12
利用騰訊的ip地址庫(kù)做ip物理地址定位
騰訊的這個(gè)還是相對(duì)比較準(zhǔn)確的。因?yàn)轵v訊每個(gè)QQ用戶發(fā)現(xiàn)自己匹配的地理位置信息不準(zhǔn)確都可以提交更正的
2010-07-07
Javascript writable特性介紹
這篇文章主要介紹了Javascript writable特性介紹,本文用淺顯易懂的語(yǔ)言講解了writable的特性,需要的朋友可以參考下
2015-02-02
js實(shí)現(xiàn)簡(jiǎn)潔大方的二級(jí)下拉菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)潔大方的二級(jí)下拉菜單效果代碼,涉及javascript通過(guò)鼠標(biāo)事件控制頁(yè)面元素的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09