我有一个应用程序,从浏览器保存录音并播放它。
我的问题是:除了safari浏览器以外的音频记录不能在safari浏览器中播放.它在音频播放上给出错误.
但是在safari里录制的音频工作得非常好。
下面是html:
<audio controls src={process.env.NEXT_PUBLIC_API_URL + voice?.url} type="audio/wav">
Your browser does not support the
<code>audio</code> element.
</audio>
下面是js:
navigator.mediaDevices
.getUserMedia({
audio: {
sampleRate: 44100,
},
})
.then(function (stream) {
speech.resume()
status = 'RECORDING'
recordingStatus.innerText = 'Recording'
recordingIcon.src = '/img/mic2.png'
mediaRecorder = new MediaRecorder(stream)
mediaRecorder.start()
mediaRecorder.ondataavailable = function (e) {
chunks.push(e.data)
}
let totalLength = 1
const totalLengthInterval = setInterval(() => {
totalLength += 1
}, 1000)
const autoStop = setTimeout(() => {
if (status == 'RECORDING') {
mediaRecorder.stop()
subsModal()
}
}, activeSubscription.limits.totalSpeechToTextLength * 1000)
mediaRecorder.onstop = async function (e) {
let blob = new Blob(chunks, {
type: 'audio/wav',
// type: isChrome ? 'audio/wav; codecs=0' : 'audio/ogg;codecs=opus',
})
const formData = new FormData()
formData.append('voice', blob)
formData.append('noteId', note.id)
formData.append('clientId', clientId)
formData.append('length', totalLength)
const url = '/api/dashboard/note/voice/add'
const { data } = await axios.post(url, formData)
if (data.success) {
message.success(data.descr)
note.voiceRecords.push(data.voice)
setVoices(note.voiceRecords.slice(0))
} else {
message.error(data.descr, 'Something went wrong')
}
recordingStatus.innerText = 'Add'
recordingIcon.src = '/img/mic1.png'
status = null
speech.suspend()
clearTimeout(autoStop)
clearInterval(totalLengthInterval)
stream.getTracks().forEach(track => track.stop())
}
})
1条答案
按热度按时间z0qdvdin1#
我遇到了同样的问题,并用这个库https://github.com/muaz-khan/RecordRTC解决了它。
这与使用MediaRecorder API非常相似,因此您可以轻松地重构代码。