js 本地录音，保存文件
<style>
span{
cursor: pointer;
}
.audio_list{
margin-top: 10px;
}
.audio_list audio{
margin-right: 40px;
position: relative;
}
audio span{
color: red;
position: absolute;
top: 0;
bottom: 0;
right: -10px;
}
</style>
</head>
<body>
<div>
<span onclick="start()">开始录音</span>
<span onclick="stop()">结束录音</span>
<div class="audio_list">
</div>
</div>
<script>
const constraints = { audio: true };
var mediaRecorder = null;
function start ( ) {
if(mediaRecorder){
stop();
return;
}
var chunks = [];
console.log("start")
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', event => {
chunks.push(event.data);
});
mediaRecorder.addEventListener('stop', () => {
const blob = new Blob(chunks, { type: 'audio/wav' });
const url = URL.createObjectURL(blob);
console.log(blob, url)
const link = document.createElement('a');
link.href = url;
link.download = 'recording.wav';
document.body.appendChild(link);
link.click();
// 在页面上创建一个音频元素，并设置其源为录音URL
var audioElement = document.createElement('audio');
var audio_list = document.querySelector('.audio_list');
audio_list.innerHTML = ""
audioElement.src = url;
audioElement.controls = true;
audio_list.appendChild(audioElement);
});
mediaRecorder.start();
})
.catch(err => {
console.error(err);
});
}
function stop ( ) {
mediaRecorder.stop();
mediaRecorder = null;
console.log("stop" ,mediaRecorder)
}
</script>
