javascript 最简单的录音代码

2021-04-17 23:00:12 阅读：276 来源： 互联网

标签：function mediaRecorder 代码 javascript 录音 var audio document

最简单的录音
效果图
在这里插入图片描述

更复杂的内容可以查看手册请
多媒体开发手册

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-capable" content="yes">
    <title>最简单录音代码</title>


</head>

<body>

    <div id="container">

        <div id="player">

            <h1>最简单录音代码</h1>

            <label id="view" ></label>
</br>
            <button id="btn-start-recording">开始录音</button>

            <button id="btn-stop-recording">停止录音</button>

            <hr>
            <audio id='audio' controls autoplay></audio>
        </div>
    </div>

   
</body>

</html>
<script>

        var startButton = document.getElementById('btn-start-recording');
        var stopButton = document.getElementById('btn-stop-recording');
        var audio = document.getElementById('audio');
        var blob;
        var mediaRecorder;
        //开始按钮
        startButton.onclick = function() {
            var txt=document.getElementById("view");
            txt.innerHTML="正在录音........,请唱歌..........";
            navigator.mediaDevices.getUserMedia({
                    audio: true
                })
                .then(onMicrophoneCaptured)
                .catch(onMicrophoneCaptureError);
        };
        //停止按钮
        stopButton.onclick = function() {
            mediaRecorder.stop();
            mediaRecorder.onstop = function(e) {
                audio.controls = true;
                var audioURL = window.URL.createObjectURL(blob);
                audio.src = audioURL;
            }
        }

         //流媒体录音 function的名字onMicrophoneCaptured 必须和上面代码里的 .then(onMicrophoneCaptured)里的一样
        function onMicrophoneCaptured(stream) {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.start();
            mediaRecorder.ondataavailable = function(e) {
                blob = new Blob([e.data], {
                    type: 'audio/mp3'
                });
            }
        }
        //回调函数  function的名字onMicrophoneCaptureError 必须和上面代码里的 .catch(onMicrophoneCaptureError);里的一样
        function onMicrophoneCaptureError() {
            alert('浏览器不支持或是用户不允许，请关闭浏览器再来一次')
        }

         
        
      
    </script>

版本兼容
在这里插入图片描述

标签：function,mediaRecorder,代码,javascript,录音,var,audio,document
来源： https://blog.csdn.net/weixin_41315600/article/details/115803332

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript 最简单的录音代码