recorder.js 基于 HTML5 实现录音功能

recorder.js 基于 HTML5 实现录音功能

recorder.js

microphone基于HTML5的录音功能,输出格式为mp3文件。

前言

完全依赖H5原生API
所涉及的API:WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL

立即学习“前端免费学习笔记(深入)”;

兼容性

Chrome、FF、Edge、QQ、360(注:目前IE和Safari全版本不兼容)

其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持

请尝试使用FF、Edge、360等浏览器进行体验,或将项目下载到本地通过localhost的方式 

使用方式

var recorder = new Recorder({    sampleRate: 44100, //采样频率,默认为44100Hz(标准MP3采样率)    bitRate: 128, //比特率,默认为128kbps(标准MP3质量)    success: function(){ //成功回调函数    },    error: function(msg){ //失败回调函数    },    fix: function(msg){ //不支持H5录音回调函数    }});

登录后复制

API

//开始录音recorder.start();//停止录音recorder.stop();//获取MP3编码的Blob格式音频文件recorder.getBlob(function(blob){ //获取成功回调函数,blob即为音频文件//  ...},function(msg){ //获取失败回调函数,msg为错误信息//  ...});

登录后复制

推荐教程:《HTML教程》《JS教程》

以上就是recorder.js 基于 HTML5 实现录音功能的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2727507.html

(0)
上一篇 2025年3月7日 23:45:32
下一篇 2025年2月27日 18:56:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue中父子组件间的通信

    这篇文章主要介绍了关于vue中父子组件间的通信,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量的设计。Vue 的核心…

    2025年3月7日 编程技术
    200
  • ES6中全新的数字方法总结(必看)

    本篇文章给大家带来的内容是关于es6中全新的数字方法总结(必看),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 本文介绍了ES6中全新的数字方法(ECMAScript 6)。 本文将向您介绍添加Number数据类型的新方法…

    编程技术 2025年3月7日
    200
  • Javascript模块化的详细介绍

    这篇文章给大家带来的内容是关于javascript模块化的详细介绍 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言 随着 Web 技术的蓬勃发展和依赖的基础设施日益完善,前端领域逐渐从浏览器扩展至服务端(Node.j…

    编程技术 2025年3月7日
    200
  • Angular 5.0 开发环境的搭建和新建第一个ng5项目

    本篇文章主要的向大家介绍angularjs如何搭建开发环境和新建第一个ng5的项目。现在我们一起来看看本篇文章吧 1.安装Node.js 在开始工作之前,我们必须设置好开发环境。如果你的机器上还没有node.js®和npm,请先安装它们。去…

    2025年3月7日 编程技术
    200
  • javascript中Date类的详解(代码示例)

    本篇文章给大家带来的内容是关于javascript中date类的详解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Date 是 JS 中的重要的一个内置对象,其实例主要用于处理时间和日期,其时间基于 1970…

    编程技术 2025年3月7日
    200
  • java开发要学什么前端技术?

    现如今,网络技术日渐发达,程序员们也要学习更多技术才不会在瞬息变幻的潮流中被迫更替,今天我将和大家谈谈,java开发需要学习的一些前端技术。 对于这个Java开发人员,不仅要知道后端的知识,前端知识是基本上也是必学的。 我感觉原因有以下几点…

    2025年3月7日
    200
  • html5用什么工具开发

    html5开发工具有:Dreamweaver、DevExtreme、WebStorm、Vscode、HTML5demos、HTML5 Tracker、Switch To HTML5、HTML5 Test、Lime JS等等。 本教程操作环境…

    2025年3月7日
    200
  • html5的开发工具有哪些

    开发工具:1、HBuilder;2、Notepad++;3、Dreamweaver;4、Sublime Text3;5、Eclipse;6、EditPlus;7、WebStorm;8、UEStudio;9、FirHtml网页编辑器等等。 本…

    2025年3月7日 编程技术
    200
  • 苹果手机怎么录音电话通话

    苹果手机怎么录音电话通话 在现今信息爆炸的时代,手机成为人们生活中不可或缺的工具之一。而随着通讯技术的不断升级,手机通话已经成为人们日常沟通的一部分,尤其在商务交流等重要场合,电话通话的录音变得愈发重要。 对于苹果手机来说,录音电话通话是一…

    互联网 2025年3月6日
    200
  • 苹果手机录音通话录音怎么操作

    苹果手机录音通话录音功能是很多用户希望了解的功能之一。在使用苹果手机通话录音的过程中,有一些操作方法是需要掌握的。本文将向大家介绍如何在苹果手机上进行通话录音的操作步骤,让您轻松掌握录音技巧。让我们一起来看看如何操作吧! 苹果手机录音通话录…

    2025年3月6日
    200

发表回复

登录后才能评论