欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)錄音與音頻播放功能

 更新時(shí)間：2022年03月21日 10:08:09   作者：別團(tuán)等shy哥發(fā)育  
微信小程序繼承了微信強(qiáng)大的語音處理功能，提供了錄音、音頻播放控制和背景音樂等功能，它們的功能不同，但有相似性。本文將詳細(xì)介紹小程序中如何實(shí)現(xiàn)錄音與音頻播放控制功能，需要的可以參考一下

小程序繼承了微信強(qiáng)大的語音處理功能，提供了錄音、音頻播放控制和背景音樂等功能，它們的功能不同，但有相似性。

1、錄音

小程序提供了wx.startRecord(Object object)開始錄音、wx.stopRecord()停止錄音和RecorderManager錄音管理器等接口對錄音功能進(jìn)行控制。因?yàn)镽ecorderManager錄音管理器包含前兩個(gè)接口的功能，所以這里只介紹RecorderManager。

接口功能和用途
RecorderManager.resume()繼續(xù)錄音
RecorderManager.stop()停止錄音
RecorderManager.onStart(function callback)監(jiān)聽錄音開始事件
RecorderManager.onResume(function callback)監(jiān)聽錄音繼續(xù)事件
RecorderManager.onPause(function callback)監(jiān)聽錄音暫停事件
RecorderManager.onStop(function callback)監(jiān)聽錄音結(jié)束事件
RecorderManager.onFrameRecorded(function callback)監(jiān)聽已錄制完指定幀大小的文件事件。如果設(shè)置了 frameSize，則會(huì)回調(diào)此事件。
RecorderManager.onError(function callback)監(jiān)聽錄音錯(cuò)誤事件

在使用錄音接口時(shí)，需要先授權(quán)開放錄音功能。

1.1 案例

本例使用RecorderManager錄音管理器實(shí)現(xiàn)錄音、暫停、繼續(xù)錄音、停止錄音和播放錄音等功能。

redorderManager.wxml

<button bindtap="start" class='btn'>開始錄音</button>
<button bindtap="pause" class='btn'>暫停錄音</button>
<button bindtap="resume" class='btn'>繼續(xù)錄音</button>
<button bindtap="stop" class='btn'>停止錄音</button>
<button bindtap="play" class='btn'>播放錄音</button>

redorderManager.js

const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()

Page({
  data: {
  },
  onLoad: function () {
  
  },
  //開始錄音的時(shí)候
  start: function () {
    var that=this
    const options = {
      duration: 10000,//指定錄音的時(shí)長，單位 ms
      sampleRate: 16000,//采樣率
      numberOfChannels: 1,//錄音通道數(shù)
      encodeBitRate: 96000,//編碼碼率
      format: 'mp3',//音頻格式，有效值 aac/mp3
      frameSize: 50,//指定幀大小，單位 KB
    }
    //開始錄音
    wx.authorize({
      scope: 'scope.record',
      success() {
        console.log("錄音授權(quán)成功");
        //第一次成功授權(quán)后 狀態(tài)切換為2
        that.setData({
          status: 2,
        })
        recorderManager.start(options);
        recorderManager.onStart(() => {
          console.log('recorder start')
        });
        //錯(cuò)誤回調(diào)
        recorderManager.onError((res) => {
          console.log(res);
        })
      },
      fail() {
        console.log("第一次錄音授權(quán)失敗");
        wx.showModal({
          title: '提示',
          content: '您未授權(quán)錄音，功能將無法使用',
          showCancel: true,
          confirmText: "授權(quán)",
          confirmColor: "#52a2d8",
          success: function (res) {
            if (res.confirm) {
              //確認(rèn)則打開設(shè)置頁面（重點(diǎn)）
              wx.openSetting({
                success: (res) => {
                  console.log(res.authSetting);
                  if (!res.authSetting['scope.record']) {
                    //未設(shè)置錄音授權(quán)
                    console.log("未設(shè)置錄音授權(quán)");
                    wx.showModal({
                      title: '提示',
                      content: '您未授權(quán)錄音，功能將無法使用',
                      showCancel: false,
                      success: function (res) {

                      },
                    })
                  } else {
                    //第二次才成功授權(quán)
                    console.log("設(shè)置錄音授權(quán)成功");
                    that.setData({
                      status: 2,
                    })
             
                    recorderManager.start(options);
                    recorderManager.onStart(() => {
                      console.log('recorder start')
                    });
                    //錯(cuò)誤回調(diào)
                    recorderManager.onError((res) => {
                      console.log(res);
                    })
                  }
                },
                fail: function () {
                  console.log("授權(quán)設(shè)置錄音失敗");
                }
              })
            } else if (res.cancel) {
              console.log("cancel");
            }
          },
          fail: function () {
            console.log("openfail");
          }
        })
      }
    })
   
   
  },
  //暫停錄音
  pause: function () {
    recorderManager.pause();
    recorderManager.onPause((res) => {

      console.log('暫停錄音')

    })
  },
  //繼續(xù)錄音
  resume: function () {
    recorderManager.resume();
    recorderManager.onStart(() => {
      console.log('重新開始錄音')
    });
    //錯(cuò)誤回調(diào)
    recorderManager.onError((res) => {
      console.log(res);
    })
  },
  //停止錄音
  stop: function () {
    recorderManager.stop();
    recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath;
      console.log('停止錄音', res.tempFilePath)
      const { tempFilePath } = res
    })
  },
  //播放聲音
  play: function () {
    innerAudioContext.autoplay = true
    innerAudioContext.src = this.tempFilePath,
      innerAudioContext.onPlay(() => {
        console.log('開始播放')
      })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },
  
})

通過recorderManager.wxml中的5個(gè)按鈕來調(diào)用RecorderManager錄音管理器的錄音、暫停、繼續(xù)錄音、停止錄音和播放錄音功能。在錄制好音頻之后也可以上傳到服務(wù)器，本例只是把錄制好的音頻存放在手機(jī)臨時(shí)目錄，然后用來播放。

這個(gè)功能不好再文章中展示，暫時(shí)不加視頻了，直到原理就行。

2、音頻播放控制

wx.createAudioContext()接口和wx.createInnerAudioContext接口包含了大多數(shù)音頻控制功能。這里主要介紹wx.createAudioContext()接口。wx.createAudioContext()是以組件<audio>為基礎(chǔ)的操作。

AudioContext實(shí)例對象可通過wx.createAudioContext接口獲取，它通過id跟一個(gè)<audio>組件綁定，操作對應(yīng)的<audio>組件。AudioContext對象常用的函數(shù)如下所示。

接口功能和用途
AudioContext.setSrc(string src)設(shè)置音頻地址
AudioContext.play()播放音頻。
AudioContext.pause()暫停音頻。
AudioContext.seek(number position)跳轉(zhuǎn)到指定位置(單位，s)。

2.1 案例

本例通過wx.createAudioContext()接口湖區(qū)AudioContext實(shí)例，然后調(diào)用播放和暫停功能，最后用slider組件來定位播放位置。

AudioContext.wxml:

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<slider bindchange='change' min="0" max="160" value="{{time}}" color="blue" selected-color="red" show-value="true"></slider>
<button class='b1' type="primary" size="mini" bindtap="audioPlay">播放</button>
<button class='b1' type="primary" size="mini"  bindtap="audioPause">暫停</button>

AudioContext.js:

Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 獲取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    time:0,
    poster: 'https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000',
    name: '稻香',
    author: '周杰倫',
    src: 'https://dl.stream.qqmusic.qq.com/RS020643ANK71H36gh.mp3?guid=5172738896&vkey=0B819C7570AAF78CC43A7C651E2C8C33FC76A07422EA718B9F8CAFD013F1BCF9E2DAF271064E05939716E400CE460A04669DFAC314460BB9&uin=1144722582&fromtag=66',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(0)
  },

  change: function (e) {
    console.log(e)
    this.audioCtx.seek(e.detail.value)
  }
})

點(diǎn)擊播放之后，就有一首免費(fèi)的稻香了。

以上就是微信小程序?qū)崿F(xiàn)錄音與音頻播放功能的詳細(xì)內(nèi)容，更多關(guān)于小程序錄音音頻播放的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 用POSTMAN發(fā)送JSON格式的POST請求示例

    用POSTMAN發(fā)送JSON格式的POST請求示例

    這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請求示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • 使用 js 簡單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例

    使用 js 簡單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例

    這篇文章主要介紹了使用 js 簡單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • bootstrap table實(shí)例詳解

    bootstrap table實(shí)例詳解

    本文通過實(shí)例代碼給大家介紹了bootstrap table樣式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
    2017-01-01
  • 微信小程序返回到頂部功能的簡單實(shí)現(xiàn)

    微信小程序返回到頂部功能的簡單實(shí)現(xiàn)

    在做微信小程序開發(fā)時(shí),遇到一個(gè)問題,要如何實(shí)現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡單實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • 小程序分享鏈接onShareAppMessage的具體用法

    小程序分享鏈接onShareAppMessage的具體用法

    這篇文章主要介紹了小程序分享鏈接onShareAppMessage的具體用法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • JavaScript預(yù)編譯的基本概念和過程詳解

    JavaScript預(yù)編譯的基本概念和過程詳解

    JavaScript在執(zhí)行代碼前,會(huì)進(jìn)行一個(gè)預(yù)編譯的過程,這個(gè)過程主要用于處理變量和函數(shù)聲明,預(yù)編譯分為全局預(yù)編譯和函數(shù)預(yù)編譯,本文將給大家詳細(xì)的介紹一下JavaScript預(yù)編譯的基本概念和過程,需要的朋友可以參考下
    2024-05-05
  • Javascript中異步等待的深入理解

    Javascript中異步等待的深入理解

    Async / Await是人們期待已久的JavaScript功能，它使使用異步功能更加有趣和易于理解。這篇文章主要給大家介紹了關(guān)于Javascript中異步等待的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • js實(shí)現(xiàn)簡單登錄功能的實(shí)例代碼

    js實(shí)現(xiàn)簡單登錄功能的實(shí)例代碼

    js驗(yàn)證用戶身份，登錄成功之后等待一定秒數(shù)，跳轉(zhuǎn)到操作頁面。使用window函數(shù)。代碼如下
    2013-11-11
  • JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法示例

    JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法示例

    這篇文章主要介紹了JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS數(shù)組遍歷、判斷、鍵值獲取等操作技巧,需要的朋友可以參考下
    2017-01-01
  • JS實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動(dòng)畫漸變彈出層效果代碼

    JS實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動(dòng)畫漸變彈出層效果代碼

    這篇文章主要介紹了JS實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動(dòng)畫漸變彈出層效果代碼,具有非常自然流暢的動(dòng)畫過度效果,涉及JavaScript針對鼠標(biāo)事件的響應(yīng)及頁面元素樣式的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
    2016-03-03

最新評論