Home > Web Front-end > JS Tutorial > recorder.js implements recording function based on HTML5

recorder.js implements recording function based on HTML5

Guanhui
Release: 2020-06-24 13:44:58
forward
4409 people have browsed it

recorder.js implements recording function based on HTML5

recorder.js

microphone is based on HTML5 recording function, and the output format is mp3 file.

Preface

Completely dependent on H5 native API
Involved APIs: WebRTC, AudioContext, Worker, Video/Audio API, Blob, URL

Compatibility

  • ##Chrome, FF, Edge, QQ, 360 (Note: Currently all versions of IE and Safari are not compatible)

  • Among them, Chrome 47 and above and QQ browser mandatory require HTTPS support

  • Please try to use FF, Edge, 360 and other browsers to experience it, or download the project locally and pass it through Localhost method

Usage method

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

API

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

Recommended tutorial: "

HTML Tutorial 》《JS tutorial

The above is the detailed content of recorder.js implements recording function based on HTML5. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template