Привет, я Мьюман. В нашей ежедневной фронтенд-разработке мы часто сталкиваемся с необходимостью получения разрешений на микрофон устройства и записи. Например, после получения запроса на реализацию функции распознавания речи в диалоговом окне чата пользователь нажимает кнопку, чтобы начать запись, нажимает кнопку еще раз, чтобы остановить запись, и преобразует записанный звук в текст для отображения. В этом процессе технические трудности в основном касаются того, как получить разрешения микрофона через браузер и как обработать аудиопоток, полученный микрофоном.
В этой статье я покажу вам шаг за шагом реализацию этой функции и расскажу, как использовать uni-app для разработки страниц H5 для получения разрешений микрофона и записи.
В среде браузера для получения разрешений микрофона и записи обычно требуется использование Интернета. APIвnavigator.mediaDevices.getUserMedia
иMediaRecorder
интерфейс。getUserMedia
Используется для получения медиапотоков,Включая аудио, видео и т. д.,иMediaRecorder
используется для записи этих медиапотоков。
В реальных проектах мы можем обрабатывать записанный звук в двух формах: первая — создать файл Blob и загрузить его на серверную часть, а другая — преобразовать аудиопоток в строку Base64 для загрузки. Конечная цель обоих методов — передача аудиоданных на сервер для обработки, например, распознавания речи (TTS) и т. д.
При разработке страниц H5 в uni-app,нужно быть внутриmanifest.json
Добавьте конфигурацию разрешений на запись в файл。Подробности следующие:
{
"h5": {
"permissions": {
"scope.record": {
"desc": «Пожалуйста, разрешите использование функции записи»
}
}
}
}
Этот код конфигурации используется для запроса разрешения на использование микрофона у пользователя, гарантируя, что приложение сможет получить доступ к аудиовходу устройства во время работы.
Примечание. Файл mainfest.json по умолчанию открывается в виде меню. Вы можете переключиться на просмотр кода, потянув левую полосу прокрутки до конца и щелкнув последнюю.
После получения разрешения на использование микрофона,мы можем использоватьnavigator.mediaDevices.getUserMedia
интерфейс Получить аудиопоток,тогда пройдиMediaRecorder
интерфейс Сделать запись。Следующий,Мы реализуем простую функцию записи.
Сначала мы добавляем на страницу кнопку записи и HTML-структуру отображения статуса записи:
<template>
<view>
<button @click="startRecording">Начать запись</button>
<button @click="stopRecording" :disabled="!isRecording">Остановить запись</button>
<text>статус записи:{{ isRecording ? «Запись» : «Не записано» }}</text>
</view>
</template>
Этот раздел используется для отображения на странице кнопок управления записью и информации о состоянии. Далее мы пишем код JavaScript для реализации функций преобразования аудиопотока в файл Blob и его загрузки, преобразования аудиопотока в строку Base64 для загрузки и загрузки аудиофайла на локальный сервер.
<script>
export default {
data() {
return {
isRecording: false,
mediaRecorder: null,
audioChunks: []
};
},
methods: {
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.ondataavailable = (event) => {
this.audioChunks.push(event.data);
};
this.mediaRecorder.onstop = () => {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
this.uploadAudio(audioBlob);
};
this.mediaRecorder.start();
this.isRecording = true;
} catch (error) {
console.error('Не удалось получить разрешение микрофона:', error);
}
},
stopRecording() {
if (this.mediaRecorder) {
this.mediaRecorder.stop();
this.isRecording = false;
}
},
uploadAudio(audioBlob) {
const formData = new FormData();
formData.append('audio', audioBlob, 'recorded_audio.wav');
uni.uploadFile({
url: 'https://xxx.com/upload', // Замените адресом вашего внутреннего интерфейса.
filePath: URL.createObjectURL(audioBlob),
name: 'audio',
formData: formData,
success: (res) => {
console.log('Загрузка прошла успешно:', res);
},
fail: (err) => {
console.error('Ошибка загрузки:', err);
}
});
}
}
};
</script>
<script>
export default {
data() {
return {
isRecording: false,
mediaRecorder: null,
audioChunks: []
};
},
methods: {
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.ondataavailable = (event) => {
this.audioChunks.push(event.data);
};
this.mediaRecorder.onstop = () => {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
this.convertToBase64(audioBlob);
};
this.mediaRecorder.start();
this.isRecording = true;
} catch (error) {
console.error('Не удалось получить разрешение микрофона:', error);
}
},
stopRecording() {
if (this.mediaRecorder) {
this.mediaRecorder.stop();
this.isRecording = false;
}
},
convertToBase64(audioBlob) {
const reader = new FileReader();
reader.readAsDataURL(audioBlob);
reader.onloadend = () => {
const base64Audio = reader.result;
this.sendAudioToBackend(base64Audio);
};
},
sendAudioToBackend(base64Audio) {
uni.request({
url: 'https://xxx.com/upload', // Замените адресом вашего внутреннего интерфейса.
method: 'POST',
data: {
audio: base64Audio
},
success: (res) => {
console.log('Загрузка прошла успешно:', res);
},
fail: (err) => {
console.error('Ошибка загрузки:', err);
}
});
}
}
};
</script>
В некоторых случаях вам также может потребоваться загрузить записанный аудиофайл на локальный компьютер пользователя. Мы можем предоставить ссылку для скачивания после завершения записи для достижения этой функции:
downloadAudio(audioBlob) {
const url = URL.createObjectURL(audioBlob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'recorded_audio.wav';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
Кроме того, после моего тестирования я обнаружил, что сгенерированный таким образом аудиофайл wav невозможно открыть обычным плеером, но его можно открыть с помощью VLC.
В этой статье мы реализовали функцию получения разрешений микрофона и записи на странице H5 uni-app, предоставив два решения для обработки аудиопотока в файлы Blob и строки Base64, а также добавили функцию записи. функция загрузки аудиофайлов на локальную территорию. Эти решения по внедрению можно гибко корректировать в соответствии с потребностями проекта. Если вы столкнетесь с подобными потребностями во время разработки, я надеюсь, что эта статья предоставит вам справочную информацию и помощь.