chrome/firefox(safari除外)中录制的音频无法在safari浏览器中播放?

zzlelutf  于 2023-02-17  发布在  Go
关注(0)|答案(1)|浏览(243)

我有一个应用程序,从浏览器保存录音并播放它。
我的问题是:除了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())
        }
      })
z0qdvdin

z0qdvdin1#

我遇到了同样的问题,并用这个库https://github.com/muaz-khan/RecordRTC解决了它。
这与使用MediaRecorder API非常相似,因此您可以轻松地重构代码。

相关问题