HTML5声音录制/播放功能的实现代码

更新时间:2023-04-06 10:25:00 阅读：评论：0

html代码：

<!doctype html><html>    <head>        <meta http-equiv="content-type" content="text/html; chart=utf-8" />        <title>火星黑洞</title>    </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>        <script type="text/javascript" src="js/hzrecorder.js"></script>        <script>            var recorder;            var audio = document我和孙悟空过一天作文300字.querylector('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(stat北京奥运会吉祥物e, e) {                    switch(state) {                        ca 'uploading':                            //var percentcomplete = math.round(e.loaded * 100 / e.total) + '%';                            break;                        ca 'ok':                            //alert(e.target.respontext);                            alert("上传成功");                            break;                        ca 'error':                            alert("上传失败");                            break;                        ca 'cancel':                            alert("上传被取消");                            break;                    }                });            }        </script>    </body></html>

hzrecorder.js

(function (window) {//兼容window.url = window.url || window.webkiturl;navigator.geturmedia = navigator.geturmedia || navigator.webkitgeturmedia || navigator.mozgeturmedia || navigator.msgeturmedia;var hzrecorder = function (stream, config) {config = config || {};config.samplebits = config.samplebits || 8      //采样数位 8, 16config.samplerate = config.samplerate || (44100 / 6);   //采样率(1/6 44100)var context = new (window.webkitaudiocontext || window.audiocontext)();var audioinput = context.createmediastreamsource(stream);var createscript = context.createscriptprocessor || context.createjavascriptnode;var recorder = createscript.apply(context, [4096, 1, 1]);var mp3receivesuccess, currenterrorcallback;var audiodata = {size: 0          //录音文件长度, buffer: []     //录音缓存, inputsamplerate: context.samplerate    //输入采样率, inputsamplebits: 16       //输入采样数位 8, 16, outputsamplerate: config.samplerate    //输出采样率, oututsamplebits: config.samplebits       //输出采样数位 8, 16, input: function (data) {this.buffer.push(new float32array(data));this.size += data.length;}, compress: function () { //合并压缩//合并var data = new float32array(this.size);var offt = 0;for (var i = 0; i < this.buffer.length; i++) {data.t(this.buffer[i], offt);offt += this.buffer[i].length;}//压缩var compression = parint(this.inputsamplerate / this.outputsamplerate);var length = data.length / compression;var result = new float32array(length);var index = 0, j = 0;while (index < length) {result[index] = data[j];j += compression;index++;}return result;}, encodewav: function () {var samplerate = math.min(this.inputsamplerate, this.outputsamplerate);var samplebits = math.min(this.inputsamplebits, this.oututsamplebits);var bytes = this.compress();var datalength = bytes.length * (samplebits / 8);var buffer = new arraybuffer(44 + datalength);var data = new dataview(buffer);var channelcount = 1;//单声道var offt = 0;var writestring = function (str) {for (var i = 0; i < str.length; i++) {data.tuint8(offt + i, str.charcodeat(i));}}// 资源交换文件标识符 writestring('riff'); offt += 4;// 下个地址开始到文件尾总字节数,即文件大小-8 data.tuint32(offt, 36 + datalength, true); offt += 4;// wav文件标志writestring('wave'); offt += 4;// 波形格式标志 writestring('fmt '); offt += 4;// 过滤字节,一般为 0x10 = 16 data.tuint32(offt, 16, true); offt += 4;// 格式类别 (pcm形式采样数据) data.tuint16(offt, 1, true); offt += 2;// 通道数 data.tuint16(offt, channelcount, true); offt += 2;// 采样率,每秒样本数,表示每个通道的播放速度 data.tuint32(off他不要你我爱你t, samplerate, true); offt += 4;// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8 data.tuint32(offt, channelcount * samplerate * (samplebits / 8), true); offt += 4;// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8 data.tuint16(offt, channelcount * (samplebits / 8), true); offt += 2;// 每样本数据位数 data.tuint16(offt, samplebits, true); offt += 2;// 数据标识符 writestring('data'); offt += 4;// 采样数据总数,即数据总大小-44 data.tuint32(offt, datalength, true); offt += 4;// 写入采样数据 if (samplebits === 8) {for (var i = 0; i < bytes.length; i++, offt++) {var s = math.max(-1, math.min(1, bytes[i]));var val = s < 0 ? s * 0x8000 : s * 0x7fff;val = parint(255 / (65535 / (val + 32768)));data.tint8(offt, val, true);}} el {for (var i = 0; i < bytes.length; i++, offt += 2) {var s = math.max(-1, math.min(1, bytes[i]));data.tint16(offt, s < 0 ? s * 0x8000 : s * 0x7fff, true);}}return new blob([data], { type: 'audio/wav' });}};//开始录音this.start = function () {audioinput.connect(recorder);recorder.connect(context.destination);}//停止this.stop = function () {recorder.disconnect();}//获取音频文件this.getblob = function () {this.stop();return audiodata.encodewav();}//回放this.play = function (audio) {audio.src = window.url.createobjecturl(this.getblob());}//上传this.upload = function (url, callback) {var fd = new formdata();fd.append("audiodata", this.getblob());var xhr = new xmlhttprequest();if (callback) {xhr.upload.addeventlistener("progress", function (e) {callback('uploading', e);}, fal);xhr.addeventlistener("load", function (e) {callback('ok', e);}, fal);xhr.addeventlistener("error", function (e) {callback('error', e);高二数学必修5}, fal);xhr.addeventlistener("abort", function (e) {callback('cancel', e);}, fal);}xhr.open("post", url);xhr.nd(fd);}//音频采集recorder.onaudioprocess = function (e) {audiodata.input(e.inputbuffer.getchanneldata(0));//record(e.inputbuffer.getchanneldata(0));}};//抛出异常hzrecorder.throwerror = function (message) {alert(message);throw new function () { this.tostring = function () { return message; } }}//是否支持录音hzrecorder.canrecording = (navigator.geturmedia != null);//获取录音机hzrecorder.get = function (callback, config) {if (callback) {if (navigator.geturmedia) {navigator.geturmedia({ audio: true } //只启用音频, function (stream) {var rec = new hzrecorder(stream, config);callback(rec);}, function (error) {switch (error.code || error.name) {ca 'permission_denied':ca 'permissiondeniederror':hzrecorder.throwerror('用户拒绝提供信息。');break;ca 'not_supported_error':ca 'notsupportederror':hzrecorder.throwerror('浏览器不支持硬件设备。');break;ca 'mandatory_unsatisfied_error':ca 'mandatoryunsatisfiederror':hzrecorder.throwerror('无法发现指定的硬件设备。');break;default:hzrecorder.throwerror('无法打开麦克风。异常信息:' + (error.code || error.name));break;}});} el {hzrecorder.throwerr('当前浏览器不支持录音功能。'); return;}}}window.hzrecorder = hzrecorder;})(window);

总结

以上所述是www.887551.com给大家介绍的html5声音录制/播放功能的实现代码，希望对大家有所帮助

本文发布于:2023-04-06 10:24:58，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/a298d1b3c91bd3182cdf21fc04d139f9.html

本文word下载地址：HTML5声音录制/播放功能的实现代码.doc

本文 PDF 下载地址：HTML5声音录制/播放功能的实现代码.pdf

上一篇：php密码生成类实例

下一篇：返回列表