IT评测·应用市场-qidao123.com技术社区
标题:
uniapp实现H5页面麦克风权限获取与灌音功能
[打印本页]
作者:
愛在花開的季節
时间:
2025-4-15 19:06
标题:
uniapp实现H5页面麦克风权限获取与灌音功能
1.权限设置
在uni-app开发H5页面时,必要在manifest.json文件中添加灌音权限的设置。详细如下:
{
"h5": {
"permissions": {
"scope.record": {
"desc": "请授权使用录音功能"
}
}
}
}
复制代码
这段设置代码是用于向用户哀求麦克风权限,确保应用在运行时可以访问装备的音频输入。
编写获取权限代码
在获取了麦克风权限后,我们可以利用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字符串上传,以及将音频文件下载到本地的功能。
js代码(将音频文件转换为Blob上传)
<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>
复制代码
js代码(将音频文件转换为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.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>
复制代码
JS代码(下载录制好的音频)
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);
}
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)
Powered by Discuz! X3.4