122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>语音录制与播放</title>
|
|
<style>
|
|
.button-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 10px;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="button-row">
|
|
<button id="startRecord">1-开始录制语音</button>
|
|
<button id="stopRecord">2-停止录制语音</button>
|
|
<button id="playRecord">3-播放录制的声音</button>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="startScreenRecord">4-获取系统扬声器声音</button>
|
|
<button id="stopScreenRecord">5-停止获取系统扬声器声音</button>
|
|
<button id="playScreenRecord">6-播放系统扬声器声音</button>
|
|
</div>
|
|
|
|
<audio id="audioPlayback" controls style="display:none;"></audio>
|
|
<audio id="audioPlayback2" controls style="display:none;"></audio>
|
|
<script>
|
|
let mediaRecorder;
|
|
let screenMediaRecorder;
|
|
let audioChunks = [];
|
|
|
|
document.getElementById('startRecord').addEventListener('click', async () => {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
mediaRecorder = new MediaRecorder(stream);
|
|
mediaRecorder.ondataavailable = event => {
|
|
audioChunks.push(event.data);
|
|
};
|
|
mediaRecorder.onstop = () => {
|
|
const audioBlob = new Blob(audioChunks, { 'type': 'audio/wav' });
|
|
const audioUrl = URL.createObjectURL(audioBlob);
|
|
document.getElementById('audioPlayback').src = audioUrl;
|
|
document.getElementById('audioPlayback').style.display = 'block';
|
|
audioChunks = []; // Reset for next recording
|
|
mediaRecorder = null;
|
|
stream.getTracks().forEach(track => {
|
|
track.stop();
|
|
});
|
|
};
|
|
mediaRecorder.start();
|
|
} catch (err) {
|
|
console.error("获取用户语音失败: ", err);
|
|
}
|
|
});
|
|
|
|
document.getElementById('stopRecord').addEventListener('click', () => {
|
|
if (mediaRecorder) {
|
|
mediaRecorder.stop();
|
|
}
|
|
});
|
|
|
|
document.getElementById('playRecord').addEventListener('click', () => {
|
|
const audioPlayback = document.getElementById('audioPlayback');
|
|
if (audioPlayback.paused) {
|
|
audioPlayback.play();
|
|
} else {
|
|
audioPlayback.pause();
|
|
}
|
|
});
|
|
|
|
|
|
document.getElementById('startScreenRecord').addEventListener('click', async()=> {
|
|
try {
|
|
// 请求访问用户的屏幕媒体流
|
|
const stream = await navigator.mediaDevices.getDisplayMedia({audio: true});
|
|
screenMediaRecorder = new MediaRecorder(stream);
|
|
screenMediaRecorder.ondataavailable = event => {
|
|
audioChunks.push(event.data);
|
|
};
|
|
screenMediaRecorder.onstop = () => {
|
|
const audioBlob = new Blob(audioChunks, { 'type': 'audio/wav' });
|
|
const audioUrl = URL.createObjectURL(audioBlob);
|
|
document.getElementById('audioPlayback2').src = audioUrl;
|
|
document.getElementById('audioPlayback2').style.display = 'block';
|
|
audioChunks = []; // Reset for next recording
|
|
screenMediaRecorder = null;
|
|
stream.getTracks().forEach(track => {
|
|
track.stop();
|
|
});
|
|
};
|
|
screenMediaRecorder.start();
|
|
} catch (err) {
|
|
console.error("获取用户语音失败: ", err);
|
|
}
|
|
});
|
|
document.getElementById('stopScreenRecord').addEventListener('click', () => {
|
|
if (screenMediaRecorder) {
|
|
screenMediaRecorder.stop();
|
|
}
|
|
});
|
|
document.getElementById('playScreenRecord').addEventListener('click', () => {
|
|
const audioPlayback = document.getElementById('audioPlayback2');
|
|
if (audioPlayback.paused) {
|
|
audioPlayback.play();
|
|
} else {
|
|
audioPlayback.pause();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |