您现在的位置是:首页 > 文章详情文章详情

jquery 录制音频文件

会飞的猪 2020-05-29 306人已围观

简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,jquery插件,插件下载,JS/CSS在线压缩。)-白码驿站

使用jquery 实现音频录制, 将录制的音频文件传到后台进行解析, 可以实现语音搜索功能。

Demo下载:https://pan.baidu.com/s/11h_L6s8NGwg0LnSZhT8QeQ

提取码:lim6

                                        
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>白码驿站</title>
    <script type="text/javascript" src="js/HZRecorder.js"></script>
    <script>
        var recorder;
        var audio = document.querySelector('audio');
        //开始录制音频
        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 div = document.createElement('div');
            var au = document.createElement('audio');
            var hf = document.createElement('a');
            au.controls = true;
            au.src = url;
            hf.href = url;
            hf.download = new Date().toISOString() + '.wav';
            hf.innerHTML = hf.download;
            div.appendChild(au);
            div.appendChild(hf);
            recordingslist.appendChild(div);
        }
        //播放音频
        function playRecording() {
            recorder.play(audio);
        }
        //提交
        function uploadAudio() {
            recorder.upload("Handler1.ashx", function (state, e) {
                switch (state) {
                    case 'uploading':
                        //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                        break;
                    case 'ok':
                        //alert(e.target.responseText);
                        alert("上传成功");
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <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 />
        <div id="recordingslist">
        </div>
    </div>
</body>
</html>
                                

上面的代码需要引用一个HZRecorder.js

Tags: JavaScript/Jquery

很赞哦! (0)

评 论

系统处理中...