首页
学习
活动
专区
工具
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提供了MediaRecorder这一个类来实现视频和音频录制。...二、上代码,具体实现录制视频和视频播放功能 这里调用MediaRecorder的API实现视频录制功能并借用MediaPlayer多媒体播放类实现录制好的视频播放。...; /* * 录制视频结束时释放相机资源 * */ private void releaseMediaRecorder() { Log.d(TAG, "录制结束释放资源 "); if...开始播放录制刚刚录制好的视频; mPlayBtn.setOnClickListener(new View.OnClickListener() { @Override public void...= null){ mMediaPlayer.release(); mMediaPlayer = null; } } } 三、延伸知识,运行时权限申请工具类 调用手机系统内置的摄像头进行视频录制时及录制视频将视频保存在本地都需要申请系统权限

3.3K21

Web前端WebRTC攻略(二) 音视频设备及数据采集

NotReadableError:操作系统某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。...OverConstrainedError:指定的要求无法被设备满足。 SecurityError:安全错误,需要用户浏览器设置中开启。...以音频设备为例,将耳机插入电脑后,耳机就变成了音频的默认设备;将耳机拔出,默认设备又切换成了系统的音频设备。...var aBlob = new Blob( array, options ); 实现录制 浏览器为我们提供了一个录制音视频的类,即 MediaRecorder。...以上就是浏览器端 WebRTC 通过设备采集音视频数据及其播放录制的相关介绍。有了数据,接下来才可以使用 WebRTC 来实现实时音视频通讯。 紧追技术前沿,深挖专业领域 扫码关注我们吧!

3.4K10
  • 语音项目——Android录音学习

    MediaRecorder录制音频文件是经过压缩的,需要设置编码器。并且录制音频文件可以用系统自带的Music播放播放。...MediaRecorder已经集成了录音、编码、压缩等,并支持少量的录音音频格式,但是这也是他的缺点,支持的格式过少并且无法实时处理音频数据。 (2)....MediaRecorder(基于文件录音) 已集成了录音,编码,压缩等。封装度很高,操作简单,录制音频文件可以用系统自带的播放播放。 缺点:无法实现实时处理音频,输出的音频格式少。...录制音频文件是经过压缩的,需要设置编码器。 技术选型,目前行业现状:API多是选用AudioRecord。...可以设置的来源包括: MediaRecorder.AudioSource.CAMCORDER :设定录音来源于同方向的相机麦克风相同,若相机无内置相机或无法识别,则使用预设的麦克风 MediaRecorder.AudioSource.DEFAULT

    3.2K10

    使用h5新标准MediaRecorder API在web页面进行音视频录制

    概述 Media Recorder,顾名思义是控制媒体录制的api,在原生app开发中,是一个应用广泛的api,用于在app内录制音频和视频。...MediaRecorder使用示例 该例子中,把video标签的内容放进了canvas里,与用户点击时在canvas绘制图案的过程一起,通过MediaRecorder对象提供的captureStream...我们知道一个完整的媒体文件中,流数据的组成是很复杂的,包括头文件,预测帧等等,当我们开始录制,不一定马上就能获得可播放的文件。...所以,该api提供了一个事件,ondataavailable,当浏览器录制编码进程积攒出可以使用的媒体数据,就会抛出该事件,告诉我们“录制的数据已经可用了”,把数据移交给用户做进一步处理。...由于媒体编码依赖浏览器底层的实现,所以很难在代码层面进行polyfill。在采集设备音频的场景下,可以使用使用AudioNodes替代,视频和canvas暂时无解。 和WebRTC的关系?

    21.9K100

    Android端的短视频开发,我们该如何快速实现移动端短视频功能?

    MediaRecorder:是Android系统直接提供给我们的录制类,用于录制音频和视频的一个类,简单方便,不需要理会中间录制过程,结束录制可以直接得到音频文件进行播放录制音频文件是经过压缩的,...需要设置编码器,录制音频文件可以用系统自带的播放播放。...优点:大部分以及集成,直接调用相关接口即可,代码量小,简单稳定; 缺点:无法实时处理音频;输出的音频格式不是很多。...MediaCodec+MediaMuxer: MediaCodec 与 MediaMuxer结合使用同样能够实现录制的功能。...从易用性的角度上来说肯定不如MediaRecorder,但是允许我们进行更加灵活的操作,比如需要给录制的视频添加水印等各种效果。

    2.1K20

    刷抖音上瘾,决定探究如果做一款类似抖音短视频app

    MediaRecorder:是Android系统直接提供给我们的录制类,用于录制音频和视频的一个类,简单方便,不需要理会中间录制过程,结束录制可以直接得到音频文件进行播放录制音频文件是经过压缩的,...需要设置编码器,录制音频文件可以用系统自带的播放播放。...优点:大部分以及集成,直接调用相关接口即可,代码量小,简单稳定; 缺点:无法实时处理音频;输出的音频格式不是很多。...MediaCodec+MediaMuxer: MediaCodec 与 MediaMuxer结合使用同样能够实现录制的功能。...从易用性的角度上来说肯定不如MediaRecorder,但是允许我们进行更加灵活的操作,比如需要给录制的视频添加水印等各种效果。

    2.5K30

    短视频源码开发,Android端短视频功能的快速实现

    MediaRecorder:是Android系统直接提供给我们的录制类,用于短视频源码开发录制音频和视频的一个类,简单方便,不需要理会中间录制过程,结束录制可以直接得到音频文件进行播放录制音频文件是经过压缩的...,需要设置编码器,录制音频文件可以用系统自带的播放播放。...优点:大部分以及集成,直接调用相关接口即可,代码量小,简单稳定; 缺点:无法实时处理音频;输出的音频格式不是很多。...MediaCodec+MediaMuxer: MediaCodec 与 MediaMuxer结合使用同样能够实现短视频源码开发录制的功能。...从易用性的角度上来说肯定不如MediaRecorder,但是允许我们进行更加灵活的操作,比如需要给录制的视频添加水印等各种效果。

    1.1K10

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

    媒体录制MediaRecorder MediaRecorder是Android自带的录制工具,通过操纵摄像头和麦克风完成媒体录制,既可录制视频,也可单独录制音频。...可监听录制结束事件,包括达到录制时长或者达到录制大小。 以上方法用于关联录像工具和事件。 setAudioSource : 设置音频来源。一般使用麦克风AudioSource.MIC。...该方法为可选 以上六个方法用于录制音频。 setVideoSource : 设置视频来源。一般使用摄像头VideoSource.CAMERA。...媒体播放MediaPlayer MediaPlayer是Android自带的播放器,可用于播放视频与音频。...录制/播放事件 下面是几个媒体录制/播放用到的回调事件接口: 录制异常事件 监听器类名 : MediaRecorder.OnErrorListener 设置监听器的方法 : MediaRecorder.setOnErrorListener

    3.2K62

    Android 两种录音方式

    MediaRecorder录制音频文件是经过压缩的,需要设置编码器。并且录制音频文件可以用系统自带的Music播放播放。...MediaRecorder已经集成了录音、编码、压缩等,并支持少量的录音音频格式,但是这也是他的缺点,支持的格式过少并且无法实时处理音频数据。...AudioRecord:主要实现对音频实时处理以及边录边播功能,相对MediaRecorder比较专业,输出是PCM语音数据,如果保存成音频文件,是不能够被播放播放的,所以必须先写代码实现数据编码以及压缩...MediaRecoder 使用 MediaRecorder因为已经集成了录音、编码、压缩等功能,所以使用起来相对比较简单。...开始录音 MediaRecorder 使用起来相对简单,音频编码可以根据自己实际需要自己设定,文件名防止重复,使用了日期时分秒的结构,audioSaveDir 是文件存储目录,可自行设定。

    7.1K31

    工作记录,使用Uniapp开发安卓应用

    Web 浏览器(即 HTML5 视频和 WebRTC)的功能通过 P2P 传递媒体,并通过与许多流行的 HTML5 视频播放器的集成进行播放。...媒体流录制MediaRecorder):https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder 用于录制媒体流...有时候听筒播放声音、有时候扬声器播放使用h5plus直接指定扬声器):https://www.html5plus.org/doc/zh_cn/audio.html 2.支持的约束对象属性:https:...fr=aladdin H5下的录音会默认打开回声消除,最终导致的就是录制音频的时候会自动过滤设备发出的声音,导致无法正常录制全部声音。用过定义约束对象关闭回声消除。...H5 ios录制不支持webm格式(支持mp4,安卓只支持webm不支持mp4):https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

    5.9K30

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

    在前面的博文《Android开发笔记(五十七)录像录音与播放》中,介绍了视频/音频录制播放,其中录像用的是MediaRecorder类,播放用的是MediaPlayer类。...首先是MediaRecorder与MediaPlayer,这对组合即可用于录像,也可单独录制音频。它们处理的音频文件是压缩过的编码文件,通常用于录制播放音乐,是最经常用到的。...可监听录制结束事件,包括达到录制时长或者达到录制大小。 setAudioSource : 设置音频来源。一般使用麦克风AudioSource.MIC。...MediaRecorder录制音频格式有amr、aac等,MediaPlayer支持播放音频格式除了amr、aac之外,还支持常见的mp3、wav、mid、ogg等经过压缩编码的音频。...; 3、SoundPool播放音频格式建议使用ogg格式,据说它对wav格式的支持不太好; 4、待播放音频要提前加载进SoundPool,不要等到要播放的时候才加载。

    3K30

    Android简易“吹一吹实现”以及录音和播放示例

    主要思路和坑的地方 主要的思路是通过MediaRecorder提供的getMaxAmplitude()函数,获取一段时间内输入的音频最大幅值来进行检测,所以除了吹的动作,其他声音也会被录进来。...MediaRecorder mediaRecorder; //用于音频播放 MediaPlayer mediaPlayer; //录制按钮 Button btnRecord...: Toast.makeText(SoundActivity.this, "空间不足,无法录制", Toast.LENGTH_SHORT).show();...,则重新读取新的录制文件 STATUS = PLAYING; //设置音频播放器 mediaPlayer = new MediaPlayer...; 在某些设备可能不支持,于是就出了问题= =好吧,我也不知道还能说啥,就酱… Vector Asset添加的图标颜色不变化 如上,我的播放按钮啊,音响啊,之类的图标都是通过Vector Asset添加的

    1.2K40

    详解Android开发录音和播放音频的步骤(动态获取权限)

    void onClick(View v) { switch (v.getId()){ case R.id.btn_stat: //⑧申请录制音频的动态权限 if(ContextCompat.checkSelfPermission...(); } recorder.setAudioSource(MediaRecorder.AudioSource.MIC);//设置音频源为手机麦克风 recorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP...);//设置输出格式3gp recorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);//设置音频编码为amr格式 //获取内存卡的根目录,...File.createTempFile("录音_",".amr",sdcardfile); recorder.setOutputFile(file.getAbsolutePath());//设置文件输出路径 //准备和启动录制音频...btn_stop.setEnabled(false); //刷新列表数据 getFileList(); } /** * ⑨重写onRequestPermissionsResult方法 * 获取动态权限请求的结果,再开启录制音频

    3.5K61

    Android FFmpeg 实现带滤镜的微信小视频录制功能

    本文将实现对采集的预览帧(添加滤镜)和 PCM 音频同时编码复用生成一个 mp4 文件,即实现一个仿微信小视频录制功能。 音视频录制编码流程 ?...音视频编码流程图 本文采用的是软件编码(CPU)实现,所以针对高分辨率的预览帧时,就需要考虑 CPU 能不能吃得消,在骁龙 8250 使用软件编码分辨率超过 1080P 的图像就会导致 CPU 比较吃力...image.getWidth(), image.getHeight()); } image.close(); } } }; Java 层音频使用的是...~MediaRecorder(); //开始录制 int StartRecord(); //添加音频数据到音频队列 int OnFrame2Encode(AudioFrame...我们基于一节的功能做一个带滤镜的小视频录制功能。 ?

    81730

    android实现录屏小功能

    两种方案各有各的优缺点,前者实现方式简单,但无法录制特定区域的画面,并且生成的视频文件一般都比较大。...后者实现较为繁琐,音频录制android7.0之前没有暂停方法,只能生成多个文件,然后对音频进行合成。用户的操作需要自己进行保存,播放时还原。播放器需要自定义生成。...但后者的好处是可扩展性高,支持特定区域录制,并且生成的音频文件比较小。 需求 录制画板,画板要求可以更改颜色粗细,可以擦除。画板底部可以是白板,图片。图片要求是相机拍摄或者本地图片。...可以播放录制内容;需要上传,所以文件要小,所有只能选择第二种方式。 github地址 ? 整个项目生成的是一个文件夹,文件夹中包含一个MP3文件,一个cw协议文件(存储用户的操作),图片。...音频 //开始录音 if (mMediaRecorder == null) { mMediaRecorder = new MediaRecorder(); } mMediaRecorder.setAudioSource

    2.3K31

    JavaScript基础修炼(14)——WebRTC在浏览器中如何获得指定格式的PCM数据

    浏览器中的音频采集处理 浏览器中的音频处理涉及到许多API的协作,相关的概念比较多,想要对此深入了解的读者可以阅读MDN的【Web 媒体技术】篇,本文中只做大致介绍。...方案1——服务端FFmpeg实现编码 很多示例都是将音频源节点直接连接到默认的输出节点(扬声器),但是几乎没什么意义,笔者目前还没有找到使用Web Audio API自动输出pcm原始采样数据的方法,...可行的方法是使用MediaRecorder录制一段音频流,但是录制实例需要传入编码相关的参数并指定MIME类型,最终得到的blob对象通常是经过编码音频数据而非pcm数据,但也因为经过了编码,这段原始数据的相关参数也就已经存在于输出的数据中了...百度语音官方文档推荐的方法是使用ffmpeg在服务端进行处理,尽管明显在音频的编解码绕了弯路,但肯定比自己手动编码难度要低得多,而且ffmepg非常强大,后续扩展也方便。...但是将数据传给outputData输出是为了在后续的节点中进行处理,或者最终作为扬声器或MediaRecorder的输入,传出无法拿到pcm数据了,所以只能自己来假扮一个MediaRecorder

    3.8K10

    Android FFmpeg 实现带滤镜的微信小视频录制功能

    [Android FFmpeg 实现带滤镜的微信小视频录制功能] 一集,有读者吐槽这个系列更新太慢了,其实实现代码一直都有,只能每天花一点时间整理一些,慢慢整理出来。...音视频录制编码流程 [音视频编码流程图] 本文采用的是软件编码(CPU)实现,所以针对高分辨率的预览帧时,就需要考虑 CPU 能不能吃得消,在骁龙 8250 使用软件编码分辨率超过 1080P 的图像就会导致...image.getWidth(), image.getHeight()); } image.close(); } } }; Java 层音频使用的是...~MediaRecorder(); //开始录制 int StartRecord(); //添加音频数据到音频队列 int OnFrame2Encode(AudioFrame...我们基于一节的功能做一个带滤镜的小视频录制功能。

    1.6K60
    领券