實現網頁版錄音功能,不支持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';