Html5 录音 Recorder

37天前276阅读约1分钟 

逛 Github 的时候发现了个好玩的,可以实现在网页上录音及保存录音,测试了下,在电脑端和手机端都完美支持。

//在项目 https://github.com/xiangyuecn/Recorder 里可以自行下载 js 或引用
<script src="recorder.mp3.min.js"></script>
<input type="button" onclick="startRec()" value="开始录音">
<input type="button" onclick="playRec()" value="结束并播放">
<script>
var rec;
function startRec(){
    rec=Recorder({type:"mp3",sampleRate:16000,bitRate:30});
    rec.open(function(){
        rec.start();
    },function(msg,isUserNotAllow){
        alert((isUserNotAllow?"用户拒绝了权限,":"")+"无法录音:"+msg);
    });
};
function playRec(){
    rec.stop(function(blob,duration){
        var audio=document.createElement("audio");
        audio.controls=true;
        document.body.appendChild(audio);
        audio.src=URL.createObjectURL(blob);
        audio.play();
    },function(msg){
        alert("录音失败:"+msg);
    });
};
</script>

以上代码就可实现基本的录音及播放功能,详细内容及使用问题可自行查看作者项目:https://github.com/xiangyuecn/Recorder

当然,其实播放的时候已经获取到了 blob 地址,也就可以下载保存的服务器。

我在想结合下博客,能不能做个语音分类,可以直接录音然后上传发布,像电台一样,哈哈,挺有趣的,改天研究研究。

分享HTML20 

Html5 录音 Recorder - Jdeal | Life is like a Design.