遇到一個需求，需要做一個手機網(wǎng)頁錄音的功能，嵌入到webview中去，用安卓原生錄音倒是可以，但是想著盡量去安卓化開發(fā)，就想著用純的js前端代碼去實現(xiàn)錄音功能。

在 Web 應用程序中，JavaScript 是運行在瀏覽器中的客戶端腳本語言，不具有直接訪問設備硬件的能力。因此，如果要在 Web 應用程序中實現(xiàn)錄音功能，通常需要通過 Web API 或第三方庫來訪問硬件設備。

HTML5 提供了 MediaDevices.getUserMedia() 方法，可以訪問攝像頭和麥克風等設備，因此可以通過該 API 實現(xiàn)錄音功能。下面是一個使用 MediaDevices.getUserMedia() 實現(xiàn)錄音的示例代碼：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    // 錄音結(jié)束時，停止并下載錄音文件
    mediaRecorder.addEventListener("dataavailable", function(event) {
      var audioFile = new Blob([event.data], { type: "audio/wav" });
      var audioURL = URL.createObjectURL(audioFile);
      var downloadLink = document.createElement("a");
      downloadLink.href = audioURL;
      downloadLink.download = "recording.wav";
      downloadLink.click();
    });

    // 錄音時間到達指定時長時，自動停止錄音
    setTimeout(function() {
      mediaRecorder.stop();
    }, 10000);
  })
  .catch(function(error) {
    console.error(error);
  });

上述代碼使用 navigator.mediaDevices.getUserMedia() 方法訪問麥克風設備，并使用 MediaRecorder API 進行錄音。錄音結(jié)束時，將錄音數(shù)據(jù)轉(zhuǎn)換為 WAV 格式的 Blob 對象，并通過創(chuàng)建一個下載鏈接來將錄音文件下載到本地。

給不了解的同學解釋一下navigator：前端的navigator是什么

需要注意的是，不同瀏覽器對 MediaDevices.getUserMedia() 和 MediaRecorder 的支持程度可能有所不同，因此在實現(xiàn)錄音功能時需要進行兼容性測試和處理。此外，對于安卓的 WebView 中，也需要確保 WebView 支持 MediaDevices.getUserMedia() 和 MediaRecorder。

那么就會有同學問：WebView支持嗎？瞧這段：

從安卓 5.0 (Lollipop) 開始，WebView 已經(jīng)支持 WebRTC，其中包括 MediaDevices.getUserMedia() 和 MediaRecorder API。因此，如果你的應用程序運行在安卓 5.0 或更高版本的設備上，并且你的 WebView 版本是最新的，那么它應該支持 MediaDevices.getUserMedia() 和 MediaRecorder。
在安卓中，WebView 的版本與操作系統(tǒng)版本是分開更新的。因此，如果你的應用程序需要在較舊版本的安卓設備上運行，那么你需要檢查 WebView 版本是否支持所需的 API，并在必要時使用兼容性處理方法來實現(xiàn)錄音功能。
需要注意的是，由于安卓設備的硬件配置和性能各異，因此錄音的質(zhì)量和可靠性可能會有所不同。在開發(fā)應用程序時，應該對錄音功能進行充分測試，并盡可能地提供用戶控制錄音質(zhì)量和格式的選項，以確保最佳的用戶體驗。

獲得了軟硬件的支持，那么就直接用吧。其他的一些用法：

例如，下面的示例代碼展示了如何使用 pause() 和 resume() 方法來實現(xiàn)暫停和繼續(xù)錄音：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    // 錄音時間到達指定時長時，自動暫停錄音
    setTimeout(function() {
      mediaRecorder.pause();
      console.log("錄音已暫停");
    }, 5000);

    // 在暫停后，再次開始錄音
    setTimeout(function() {
      mediaRecorder.resume();
      console.log("錄音已恢復");
    }, 10000);

    // 錄音結(jié)束時，停止并下載錄音文件
    mediaRecorder.addEventListener("dataavailable", function(event) {
      var audioFile = new Blob([event.data], { type: "audio/wav" });
      var audioURL = URL.createObjectURL(audioFile);
      var downloadLink = document.createElement("a");
      downloadLink.href = audioURL;
      downloadLink.download = "recording.wav";
      downloadLink.click();
    });
  })
  .catch(function(error) {
    console.error(error);
  });

在上述代碼中，我們使用 pause() 方法在 5 秒鐘后暫停錄音，并使用 resume() 方法在 10 秒鐘后恢復錄音。當錄音結(jié)束時，我們將錄音數(shù)據(jù)轉(zhuǎn)換為 WAV 格式的 Blob 對象，并創(chuàng)建一個下載鏈接將錄音文件下載到本地。

需要注意的是，在使用 pause() 和 resume() 方法時，我們需要考慮到錄音時長和暫停/恢復時的延遲時間，以確保正確的錄音效果。

到這里，前端js調(diào)用錄音功能就完成了。但是這種方法有一個致命的不方便，就是無法使用ip進行移動端調(diào)試，因為網(wǎng)頁瀏覽器有安全機制，他只允許https和localhost訪問麥克風攝像頭等硬件，所以這給我們移動開發(fā)帶來了不便，無法進行本地調(diào)試，當然如果想搞一個本地的安全證書，又額外增加了工作量，還是建議下面這種方法吧，通過js和Java接口調(diào)用安卓的硬件是最方便的了。

-----------------------這是一條美麗的分割線-----------------------

接著往下看吧：

在安卓的WebView中，你可以使用JavaScript來調(diào)用安卓系統(tǒng)的原生API，以實現(xiàn)各種功能，包括錄音。

以下是一個使用JavaScript和安卓原生API在WebView中實現(xiàn)錄音的簡單示例：

1、首先，在你的WebView中添加一個JavaScript接口，以便JavaScript代碼可以調(diào)用安卓原生API。你可以使用addJavascriptInterface方法來完成這個步驟。

// 在Java代碼中添加一個JavaScript接口
webView.addJavascriptInterface(new JavaScriptInterface(), "JsBridge");

然后再在接口類中添加安卓方法供js調(diào)用。

        var recorder: MediaRecorder? = null
        var isRecording = false//記錄是否正在錄制
        var filePath = ""

        // 在 Kotlin 中添加一個方法來接收前端頁面發(fā)送的開始錄音指令
        @JavascriptInterface
        fun startRecord(fileName: String) {
            if (recorder == null) {
                recorder = MediaRecorder()
                recorder!!.setAudioSource(MediaRecorder.AudioSource.MIC);
                recorder!!.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4);
                // 設置音頻編碼器和比特率
                recorder!!.setAudioEncoder(MediaRecorder.AudioEncoder.AAC);
                recorder!!.setAudioEncodingBitRate(128000);
            }
            // 獲取應用程序的內(nèi)部存儲目錄
            val appDir: File = MyApp.app.filesDir
            // 創(chuàng)建一個新的子目錄來存儲錄制的音頻文件
            val audioDir = File(appDir, "audio")
            if (!audioDir.exists()) {
                audioDir.mkdirs()
            }
            // 設置輸出文件路徑和名稱
            filePath = File(audioDir, fileName).absolutePath
            recorder!!.setOutputFile(filePath)

            recorder!!.prepare()
            recorder!!.start()
            isRecording = true
            context.runOnUiThread {
                binding.webView.loadUrl("javascript:recordStartCallback('${filePath}')")
            }
        }

        // 在 Kotlin 中添加一個方法來接收前端頁面發(fā)送的暫停錄音指令
        @JavascriptInterface
        fun pauseRecord() {
            if (isRecording) {
                recorder!!.pause()
                isRecording = false
            }
        }

        // 在 Kotlin 中添加一個方法來接收前端頁面發(fā)送的結(jié)束錄音指令
        @JavascriptInterface
        fun stopRecord() {
            if (isRecording) {
                // 在需要停止錄制時停止并釋放資源
                recorder!!.stop();
                recorder!!.release();
                recorder = null;
                isRecording = false
                context.runOnUiThread {
                    val file = File(filePath)
      				// 在這里可以做錄音結(jié)果file的處理，例如上傳錄音文件到服務器等上傳成功的回調(diào)文件地址可以通過js預留的錄音完成回調(diào)方法recordFinishCallback給到js
                }
            }
        }

        // 在 Kotlin 中添加一個方法來接收前端頁面發(fā)送的播放錄音指令，這是錄音完成以后的播放功能
        @JavascriptInterface
        fun playRecord() {
            if (filePath != "") {
                val mediaPlayer = MediaPlayer()
                mediaPlayer.setDataSource(filePath)
                mediaPlayer.prepare()
                mediaPlayer.start()
                mediaPlayer.setOnCompletionListener {
                    // 音頻播放完畢
                    mediaPlayer.release();
                }
            }
        }

2、接下來，在你的JavaScript代碼中，你可以使用Android對象來調(diào)用安卓原生API。

    // 調(diào)用安卓端的開始錄音方法
    startRecording() {
      window.JsBridge.startRecord("audio_"+Date.now()+".mp3")
    },
    // 調(diào)用安卓端的暫停錄音方法
    pauseRecord() {
      window.JsBridge.pauseRecord()
    },
    // 調(diào)用安卓端的結(jié)束錄音方法
    stopRecord() {
      window.JsBridge.stopRecord()
    },
    // 接收安卓端發(fā)送的開始錄音回調(diào)
    recordStartCallback(filePath) {
      console.log('錄音已開始，文件路徑為：' + filePath)
      //開始錄音
    },
    // 接收安卓端發(fā)送的結(jié)束錄音回調(diào)
    recordFinishCallback(filePath) {
      console.log('錄音已結(jié)束，服務器地址為：' + filePath)
      this.filePath = filePath
    },

3、最后，記得在你的安卓應用程序中授予RECORD_AUDIO權限，然后再activity中動態(tài)申請一下權限，以便應用程序可以訪問麥克風并進行錄音。

<!-- 在AndroidManifest.xml中添加RECORD_AUDIO權限 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

需要注意的是，在實際開發(fā)中，你需要進行一些適配你需求的工作，而且你能看到這里，說明你已經(jīng)不是小白了，本文有很多無用的布局的代碼沒有貼出想必不會影響到你的理解。

本文操作就到這里了，需要的同學自行參悟，如果不小心幫到了你，那么不勝榮幸；
如果沒有幫到你，那么很遺憾耽誤了你寶貴的時間，希望你也不要因此憤恨，畢竟人非圣賢，我能力有限，不能滿足所有人的需求，看開些就好。文章來源地址http://www.zghlxwxcb.cn/news/detail-469062.html

到了這里，關于已解決：H5移動端網(wǎng)頁實現(xiàn)錄音功能，js實現(xiàn)錄音功能，包括安卓webview接口也可以使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！