Java 脚本中的录音
Audio Recording in Java Script
我知道这是一个常见问题,但出于某种原因,有几个答案(这让我很困惑)
tl;博士
我正在尝试设置一个按钮,让您最多录制 10 秒(如果您想在此之前停止录制,可以按停止)
然后让你玩。
到目前为止我尝试过的:
我知道有库 getUserMedia
,我已经(尝试)创建了一个 MediaStream
。
当谈到录音本身和 the.Start() 和 Stop()
时,我感到困惑
这是我获取用户访问麦克风权限的代码:
const getmiceacesses = function () {
const stream = navigator.mediaDevices
.getUserMedia({ audio: true })
.then(function (stream) {const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", (event) => {
audioChunks.push(event.data);
});
});};
const recording = document.querySelector(`.recorder`);
recording.addEventListener(`click`, getmiceacesses);
谢谢大家!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<audio id='audioPlayer'></audio>
<button type="button" class="recorder">Start</button>
<button type="button" class="stopRecorder">Stop</button>
<script>
function playAudio(audioChunks) {
const blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
const audioPlayer = document.getElementById('audioPlayer')
audioPlayer.src = URL.createObjectURL(blob);
audioPlayer.controls=true;
audioPlayer.autoplay=true;
}
var mediaRecorder; // Need to be accessible for the stopRecorder function
const audioChunks = []; // Place it here to debug it contents after finsih recording
const getmiceacesses = function () {
const stream = navigator.mediaDevices.getUserMedia({ audio: true })
.then(function (stream) {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
setTimeout(stopRecorder, 10000) // To automatically stop the recorder after 10 seconds
mediaRecorder.addEventListener("dataavailable", (event) => {
audioChunks.push(event.data);
playAudio(audioChunks)
console.log('Debugging Breakpoint')
});
})
;};
const stopRecorder = function(){
if(mediaRecorder.state === 'recording'){
mediaRecorder.stop();
}
}
const recording = document.querySelector('.recorder');
recording.addEventListener('click', getmiceacesses);
const stopRecording = document.querySelector('.stopRecorder');
stopRecording.addEventListener('click', stopRecorder);
</script>
</body>
</html>
我知道这是一个常见问题,但出于某种原因,有几个答案(这让我很困惑)
tl;博士 我正在尝试设置一个按钮,让您最多录制 10 秒(如果您想在此之前停止录制,可以按停止) 然后让你玩。
到目前为止我尝试过的:
我知道有库 getUserMedia
,我已经(尝试)创建了一个 MediaStream
。
当谈到录音本身和 the.Start() 和 Stop()
这是我获取用户访问麦克风权限的代码:
const getmiceacesses = function () {
const stream = navigator.mediaDevices
.getUserMedia({ audio: true })
.then(function (stream) {const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", (event) => {
audioChunks.push(event.data);
});
});};
const recording = document.querySelector(`.recorder`);
recording.addEventListener(`click`, getmiceacesses);
谢谢大家!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<audio id='audioPlayer'></audio>
<button type="button" class="recorder">Start</button>
<button type="button" class="stopRecorder">Stop</button>
<script>
function playAudio(audioChunks) {
const blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
const audioPlayer = document.getElementById('audioPlayer')
audioPlayer.src = URL.createObjectURL(blob);
audioPlayer.controls=true;
audioPlayer.autoplay=true;
}
var mediaRecorder; // Need to be accessible for the stopRecorder function
const audioChunks = []; // Place it here to debug it contents after finsih recording
const getmiceacesses = function () {
const stream = navigator.mediaDevices.getUserMedia({ audio: true })
.then(function (stream) {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
setTimeout(stopRecorder, 10000) // To automatically stop the recorder after 10 seconds
mediaRecorder.addEventListener("dataavailable", (event) => {
audioChunks.push(event.data);
playAudio(audioChunks)
console.log('Debugging Breakpoint')
});
})
;};
const stopRecorder = function(){
if(mediaRecorder.state === 'recording'){
mediaRecorder.stop();
}
}
const recording = document.querySelector('.recorder');
recording.addEventListener('click', getmiceacesses);
const stopRecording = document.querySelector('.stopRecorder');
stopRecording.addEventListener('click', stopRecorder);
</script>
</body>
</html>