H5网页录音，获取的blob上传后台服务器

oldk007

已于 2023-12-26 09:33:07 修改

阅读量1.1k

点赞数 18

文章标签：音频物联网服务器

于 2023-12-26 00:25:08 首次发布

本文链接：https://blog.csdn.net/qq_42860875/article/details/135211630

版权

前端录音获取参考

使用H5实现在线录音并保存到本地_h5 录音功能-CSDN博客

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Online Audio Recorder</title>
</head>
<body>
    <button id="startRecord">Start Recording</button>
    <button id="stopRecord" disabled>Stop Recording</button>
    <audio id="audioPlayer" controls></audio>
 
    <script>
        let mediaRecorder;
        let audioChunks = [];
        let audioPlayer = document.getElementById('audioPlayer');
        let startRecordButton = document.getElementById('startRecord');
        let stopRecordButton = document.getElementById('stopRecord');
 
        startRecordButton.addEventListener('click', startRecording);
        stopRecordButton.addEventListener('click', stopRecording);
 
        async function startRecording() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.ondataavailable = event => {
                    if (event.data.size > 0) {
                        audioChunks.push(event.data);
                    }
                };
                mediaRecorder.onstop = () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                    const audioUrl = URL.createObjectURL(audioBlob);
                    audioPlayer.src = audioUrl;
 
                    // Save the audio locally
                    const a = document.createElement('a');
                    a.href = audioUrl;
                    a.download = 'recording.wav';
                    a.style.display = 'none';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
                mediaRecorder.start();
                startRecordButton.disabled = true;
                stopRecordButton.disabled = false;
            } catch (error) {
                console.error('Error accessing microphone:', error);
            }
        }
 
        function stopRecording() {
            mediaRecorder.stop();
            startRecordButton.disabled = false;
            stopRecordButton.disabled = true;
        }
    </script>
</body>
</html>

在这里插入数据上传部分，参考jquery post blob - 编程开发 (b5b6.com)

               mediaRecorder.onstop = () => {
                   const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                   const audioUrl = URL.createObjectURL(audioBlob);
                   audioPlayer.src = audioUrl;

                   var formData = new FormData();
                   formData.append('wavfile', audioBlob);
                    
                   $.ajax({
                      url: url,
                      type: 'POST',
                      data: formData,
                      processData: false,
                      contentType: false,
                      success: function(data) {
                        console.log('上传成功！')
                      },
                      error: function(err) {
                      console.log('上传失败：' + err.message)
                      }
                    })
                };

后台存储为wav文件，大功告成