ホームページ > 記事 > ウェブフロントエンド > HTML5録音・再生機能の実装コード

HTML5録音・再生機能の実装コード

不言オリジナル: 2018-05-05 11:11:482369ブラウズ

この記事では主に HTML5 音声録音/再生機能の実装コードを紹介します。必要な友人はそれを参照してください。

HZRecorder。 js

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>火星黑洞</title>
    </head>
    <body>
        <p>
            <audio autoplay></audio>
            <input onclick="startRecording()" type="button" value="录音" />
            <input onclick="stopRecording()" type="button" value="停止" />
            <input onclick="playRecording()" type="button" value="播放" />
            <input onclick="uploadAudio()" type="button" value="提交" />
            <br />
            <p id="recordingslist"></p>
        </p>
        <script type="text/javascript" src="js/HZRecorder.js"></script>
        <script>
            var recorder;
            var audio = document.querySelector(&#39;audio&#39;);
            function startRecording() {
                HZRecorder.get(function(rec) {
                    recorder = rec;
                    recorder.start();
                }, {
                    sampleBits: 16,
                    sampleRate: 16000
                });
            }
            function stopRecording() {
                recorder.stop();
                var blob = recorder.getBlob();
                var url = URL.createObjectURL(blob);
                var p = document.createElement(&#39;p&#39;);
                var au = document.createElement(&#39;audio&#39;);
                var hf = document.createElement(&#39;a&#39;);
                au.controls = true;
                au.src = url;
                hf.href = url;
                hf.download = new Date().toISOString() + &#39;.wav&#39;;
                hf.innerHTML = hf.download;
                p.appendChild(au);
                p.appendChild(hf);
                recordingslist.appendChild(p);
            }
            function playRecording() {
                recorder.play(audio);
            }
            function uploadAudio() {
                recorder.upload("Handler1.ashx", function(state, e) {
                    switch(state) {
                        case &#39;uploading&#39;:
                            //var percentComplete = Math.round(e.loaded * 100 / e.total) + &#39;%&#39;;
                            break;
                        case &#39;ok&#39;:
                            //alert(e.target.responseText);
                            alert("上传成功");
                            break;
                        case &#39;error&#39;:
                            alert("上传失败");
                            break;
                        case &#39;cancel&#39;:
                            alert("上传被取消");
                            break;
                    }
                });
            }
        </script>
    </body>
</html>

以上がHTML5録音・再生機能の実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML ページのネイティブ VIDEO タグがダウンロードボタン機能を非表示にします次の記事：HTML ページのネイティブ VIDEO タグがダウンロードボタン機能を非表示にします

続きを見る