js 录音
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; }
js
<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>