首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用MediaRecorder录制音频后,无法再在浏览器上播放音频

的原因是,录制的音频数据以Blob对象的形式保存,而浏览器无法直接播放Blob对象。为了在浏览器上播放录制的音频,需要将Blob对象转换为可播放的音频格式,如MP3、WAV等。

以下是一种解决方案:

  1. 将录制的音频数据保存为Blob对象:
代码语言:txt
复制
let recordedBlobs = [];

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

mediaRecorder.ondataavailable = handleDataAvailable;
  1. 将Blob对象转换为可播放的音频格式:
代码语言:txt
复制
function download() {
  const blob = new Blob(recordedBlobs, { type: 'audio/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded_audio.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}

在上述代码中,我们将录制的音频数据保存在recordedBlobs数组中,并通过Blob对象的URL.createObjectURL方法创建一个可播放的URL。然后,我们创建一个隐藏的链接a,设置其href属性为该URL,并指定下载的文件名。最后,通过模拟点击链接a来下载音频文件。

这是一个简单的解决方案,如果需要更复杂的音频处理或播放功能,可以使用第三方库或API来实现,如Web Audio API、Howler.js等。

腾讯云相关产品推荐:

  • 腾讯云音视频处理(云点播):提供音视频处理、转码、截图、水印、字幕等功能,适用于各类音视频应用场景。详情请参考:腾讯云音视频处理
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和管理各类非结构化数据。详情请参考:腾讯云对象存储
  • 腾讯云云服务器(CVM):提供弹性计算能力,支持按需购买、弹性伸缩,适用于各类应用的部署和运行。详情请参考:腾讯云云服务器
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Android开发笔记(五十七)录像录音与播放

    MediaRecorder是Android自带的录制工具,通过操纵摄像头和麦克风完成媒体录制,既可录制视频,也可单独录制音频。其中对摄像头Camera的介绍参见《Android开发笔记(五十六)摄像头拍照》。 下面是MediaRecorder的常用方法: reset : 重置录制资源 prepare : 准备录制 start : 开始录制 stop : 结束录制 release : 释放录制资源 以上方法用于控制录像/录音操作。 setCamera : 设置摄像头对象 setPreviewDisplay : 设置预览界面。一般使用SurfaceHolder.getSurface setOrientationHint : 设置预览的角度。跟拍照一样一般设置90度 以上三个方法用于录制视频,如果仅是录音则不需要这三个方法。 setOnErrorListener : 设置错误监听器。可监听服务器异常以及未知错误的事件。 setOnInfoListener : 设置信息监听器。可监听录制结束事件,包括达到录制时长或者达到录制大小。 以上方法用于关联录像工具和事件。 setAudioSource : 设置音频来源。一般使用麦克风AudioSource.MIC。 setOutputFormat : 设置媒体输出格式。OutputFormat.AMR_NB表示窄带格式,OutputFormat.AMR_WB表示宽带格式,AAC_ADTS表示高级的音频传输流格式。该方法要在setVideoEncoder之前调用,不然调用setAudioEncoder时会报错“java.lang.IllegalStateException”。 setAudioEncoder : 设置音频编码器。AudioEncoder.AMR_NB表示窄带编码,AudioEncoder.AMR_WB表示宽带编码,AudioEncoder.AAC表示低复杂度的高级编码,AudioEncoder.HE_AAC表示高效率的高级编码,AudioEncoder.AAC_ELD表示增强型低延迟的高级编码。 注意:setAudioEncoder应在setOutputFormat之后执行,否则会出现“setAudioEncoder called in an invalid state(2)”的异常。 setAudioSamplingRate : 设置音频的采样率,单位赫兹(Hz)。该方法为可选,AMRNB默认8khz,AMRWB默认16khz。 setAudioChannels : 设置音频的声道数。1表示单声道,2表示双声道。该方法为可选 setAudioEncodingBitRate : 设置音频每秒录制的字节数。越大则音频越清晰。该方法为可选 以上六个方法用于录制音频。 setVideoSource : 设置视频来源。一般使用摄像头VideoSource.CAMERA。 setOutputFormat : 设置媒体输出格式。OutputFormat.MPEG_4表示MPEG4格式,OutputFormat.THREE_GPP表示3GP格式。该方法要在setVideoEncoder之前调用。 setVideoEncoder : 设置视频编码器。VideoEncoder.MPEG_4_SP表示MPEG4编码,H263表示h263编码,H264表示h264编码。 setVideoSize : 设置视频的分辨率。 setVideoEncodingBitRate : 设置视频每秒录制的字节数。越大则视频越清晰。该方法为可选 setVideoFrameRate : 设置视频每秒录制的帧数。越大则视频越连贯,当然大小也越大。该方法为可选 以上六个方法用于录制视频,如果仅是录音则不需要这五个方法。 setMaxDuration : 设置录制时长。单位毫秒。 setMaxFileSize : 设置录制的媒体大小。单位字节。 setOutputFile : 设置输出文件的路径。 以上方法用于设置录像/录音参数。

    06

    Android开发笔记(一百二十六)自定义音乐播放器

    在Android手机上面,音频的处理比视频还要复杂,这真是出人意料。在前面的博文《Android开发笔记(五十七)录像录音与播放》中,介绍了视频/音频的录制与播放,其中录像用的是MediaRecorder类,播放用的是MediaPlayer类。虽然Android还提供了专门的视频视图VideoView,但是该控件并非新的东西,而是继承了MediaRecorder和MediaPlayer,所以严格来说,Android上面只有一种视频的录制和播放方式。可是音频就大不一样了,Android提供了两种录音方式,以及至少三种常用的播音方式。两种录音方式分别是MediaRecorder类和AudioRecord类,而播音方式包括MediaPlayer类、AudioTrack类和SoundPool类,它们的使用场合各有千秋,且待笔者下面细细道来。 首先是MediaRecorder与MediaPlayer,这对组合即可用于录像,也可单独录制音频。它们处理的音频文件是压缩过的编码文件,通常用于录制和播放音乐,是最经常用到的。MediaRecorder与MediaPlayer在处理音频和视频时,整体流程是一样的,只有在部分方法的调用上有所差异,下面分别把录音/播音有关的方法列出来。 MediaRecorder的录音相关方法: reset : 重置录制资源 prepare : 准备录制 start : 开始录制 stop : 结束录制 release : 释放录制资源 setOnErrorListener : 设置错误监听器。可监听服务器异常以及未知错误的事件。 setOnInfoListener : 设置信息监听器。可监听录制结束事件,包括达到录制时长或者达到录制大小。 setAudioSource : 设置音频来源。一般使用麦克风AudioSource.MIC。 setOutputFormat : 设置媒体输出格式。OutputFormat.AMR_NB表示窄带格式,OutputFormat.AMR_WB表示宽带格式,AAC_ADTS表示高级的音频传输流格式。该方法要在setVideoEncoder之前调用,不然调用setAudioEncoder时会报错“java.lang.IllegalStateException”。 setAudioEncoder : 设置音频编码器。AudioEncoder.AMR_NB表示窄带编码,AudioEncoder.AMR_WB表示宽带编码,AudioEncoder.AAC表示低复杂度的高级编码,AudioEncoder.HE_AAC表示高效率的高级编码,AudioEncoder.AAC_ELD表示增强型低延迟的高级编码。 注意:setAudioEncoder应在setOutputFormat之后执行,否则会出现“setAudioEncoder called in an invalid state(2)”的异常。 setAudioSamplingRate : 设置音频的采样率,单位赫兹(Hz)。该方法为可选,AMRNB默认8khz,AMRWB默认16khz。 setAudioChannels : 设置音频的声道数。1表示单声道,2表示双声道。该方法为可选 setAudioEncodingBitRate : 设置音频每秒录制的字节数。越大则音频越清晰。该方法为可选 setMaxDuration : 设置录制时长。单位毫秒。 setMaxFileSize : 设置录制的媒体大小。单位字节。 setOutputFile : 设置输出文件的路径。 MediaPlayer的播音相关方法: reset : 重置播放器 prepare : 准备播放 start : 开始播放 pause : 暂停播放 stop : 停止播放 setOnPreparedListener : 设置准备播放监听器。 setOnCompletionListener : 设置结束播放监听器。 setOnSeekCompleteListener : 设置播放拖动监听器。 create : 创建指定Uri的播放器。 setDataSource : 设置播放数据来源。create与setDataSource只需设置其一。 setVolume : 设置音量。第一个参数是左声道,第二个参数是右声道,取值在0-1之间。 setAudioStreamType : 设置音频流的类型。AudioManager.STREAM_MUSIC表示音乐,AudioManager.STREAM_RING表示铃声,AudioManager.STREAM_ALARM表示闹钟,AudioManager.STREAM_NOTIFICATION表示通知。 setLooping : 设置是否循环播放。 i

    03
    领券