vue里怎么录音

在vue中我们可以使用Web API中的Media Devices来实现录音功能。在进行录音之前我们需要引入navigator.mediaDevices.getUserMedia()函数用来操作设备。

getUserMedia({ audio: true })

vue里怎么录音

在这段代码中，我们传入属性audio: true来调用设备的麦克风。接下来我们可以将它封装成一个函数在vue的组件中进行调用：

async function startRecording() { 
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  const mediaRecorder = new MediaRecorder(stream) 
  mediaRecorder.start()   
  const audioChunks = []; 
  mediaRecorder.addEventListener("dataavailable",event => { 
    audioChunks.push(event.data); 
  });  
  
  mediaRecorder.addEventListener("stop",() => { 
    const audioBlob = new Blob(audioChunks); 
    const audioUrl = URL.createObjectURL(audioBlob); 
    const audio = new Audio(audioUrl); 
    audio.play(); 
  }); 
  
  setTimeout(() => { 
    mediaRecorder.stop(); 
  },3000); 
}

在上述代码中，我们首先调用getUserMedia()函数并传入audio: true属性，以获取设备的音频流。接下来我们使用MediaRecorder()类记录我们的音频流。MediaRecorder()类可以在我们录制音频时监听数据，并将其存储在audioChunks数组中。

当我们结束录音时，我们将数据存储在audioBlob对象中，并使用createObjectURL()方法将其转换为URL。我们可以使用Audio()类来读取并播放这个URL。最后，我们使用setTimeout()方法来停止录音并停止MediaRecorder实例。

最后，我们将这个函数导出模块，以便在vue的组件中引入并调用。

export default {
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();
      const audioChunks = [];
      mediaRecorder.addEventListener("dataavailable",event => {
        audioChunks.push(event.data);
      });
      mediaRecorder.addEventListener("stop",() => {
        const audioBlob = new Blob(audioChunks);
        const audioUrl = URL.createObjectURL(audioBlob);
        const audio = new Audio(audioUrl);
        audio.play();
      });
      setTimeout(() => {
        mediaRecorder.stop();
      },3000);
    }
  }
};

现在我们就可以轻松地使用Vue来录制音频了！

相关推荐