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

2020-04-21 07:07:32易采站长站整理

html代码:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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.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>
</body>
</html>

HZRecorder.js


(function (window) {
//兼容
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var HZRecorder = function (stream, config) {
config = config || {};
config.sampleBits = config.sampleBits || 8 //采样数位 8, 16
config.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;