[摘要]这篇文章主要介绍了关于HTML5声音录制/播放功能的实现代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下html代码：<!DOCTYPE html><html&g...
这篇文章主要介绍了关于HTML5声音录制/播放功能的实现代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
html代码：
<!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('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 p = document.createElement('p');
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;
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 '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 关键词：HTML5声音录制/播放技巧的完成代码