JavaScript錄音功能-react

實現網頁版錄音功能,不支持IE瀏覽器

index.html

        // 獲取錄音權限
        window.onload = function init() {
            try {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
                window.URL = window.URL || window.webkitURL;
                audio_context = new AudioContext;
            } catch (e) {
                alert('No web audio support in this browser!');
            }   
        };

record.jsx

let recorder;
let audio_context;
import { Recorder } from 'utils';
export default class Record extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
        }

    }
    componentDidMount(){
        let getUserMedia_1 = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
        getUserMedia_1.call(navigator,{audio: true}, this.startUserMedia, function(e) {
            console.log('No live audio input: ' + e)
        });

    }
    // 初始化錄音功能
    startUserMedia = (stream) => {
        audio_context = new AudioContext
        var input = audio_context.createMediaStreamSource(stream)
        recorder = new Recorder(input)
    }
    // 開始錄音
    startRecording = () => {
        recorder && recorder.record()
    }
    // 停止錄音
    stopRecording = () => {
        recorder && recorder.stop()
        this.createDownloadLink()
        recorder.clear() // 清楚錄音,如果不清除,可以繼續錄音
    }
    // 生成文件
    createDownloadLink = () => {
        recorder && recorder.exportWAV((blob) => {
            console.log(blob)
            this.setState({
                fileDataBlob: blob
            })
            if(!blob){
                console.log('無錄音文件')
                return false;
            }else{
                var url = URL.createObjectURL(blob); // 生成的錄音文件路徑,可直接播放
            }
        });
    }
}

最后還要引入recorder.js
我的引入方法:將recorder.js放入utils中
utils/index.js

export { default as Recorder } from './recorder';
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,695評論 1 45
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,009評論 3 119
  • 最近幾年網上總有一類文章特別受歡迎,標題往往連字都不變:我們終究還是變成了自己不喜歡的那類人、自己討厭的樣子、自己...
    糖三角先森閱讀 258評論 0 0
  • 忙碌了一上午,下午練完鋼筆字,就迫不及待翻開《自控力》這本跟意志力有關的書。看完書本前言,回想自己以前的經歷,然后...
    石階上的青苔閱讀 190評論 1 3