Logo
技术 C#

recorder.js实现录音功能

photo
Pastore Antonio

2022年05月27日

最近闲来无事,便想着去了解一下长按录音功能,于是网上各种搜,但是都没有我想要的效果,于是决定干脆自己弄一个,话不多说先放效果图。(考虑到recorder.js的兼容性,本文用是火狐浏览器进行测试的)

 (    注意:本项目在某些浏览器不兼容,去网上找兼容代码粘过来就行了,在这里就不过多介绍关于兼容的问题了  )

 

 

图一:打开浏览器,输入项目地址,弹出请求权限,点击“请求权限即可”   

图二:长按按钮,弹出正在录音提示,表示正在录音中……

图三:松开录音按钮,录音结束,查看本次录音

 

下面是HTML+js代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            audio { display: block; margin-bottom: 10px; }
            #audio-container { padding: 20px 0; }
            .ui-btn { display: inline-block; padding: 5px 20px; font-size: 14px; line-height: 1.428571429; box-sizing:content-box; text-align: center; border: 1px solid #e8e8e8; border-radius: 3px; color: #555; background-color: #fff; border-color: #e8e8e8; white-space: nowrap; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
            .ui-btn:hover, .ui-btn.hover { color: #333; text-decoration: none; background-color: #f8f8f8; border:1px solid #ddd; }
            .ui-btn:focus, .ui-btn:active { color: #333; outline: 0; }
            .ui-btn.disabled, .ui-btn.disabled:hover, .ui-btn.disabled:active, .ui-btn[disabled], .ui-btn[disabled]:hover, .ui-state-disabled .ui-btn { cursor: not-allowed; background-color: #eee; border-color: #eee; color: #aaa; }
            .ui-btn-primary { color: #fff;  background-color: #39b54a;  border-color: #39b54a; position: fixed;bottom: 1.5rem;width: 80%;margin-left: 10%;padding: .5rem 0;}
            .ui-btn-primary:hover, .ui-btn-primary.hover { color: #fff; background-color: #16a329; border-color: #16a329; }
            .ui-btn-primary:focus, .ui-btn-primary:active { color: #fff; }
            .ui-btn-primary.disabled:focus{ color: #aaa; }
            img{
                display: block;
                width:40%;
                margin: auto;
            }
            body{
                margin:0;
                padding: 0;
            }
            #mask{
                width: 43%;
                background: rgba(0,0,0,0.05);
                padding: 3rem 0 1rem 0;
                display: none;
                margin: 2rem auto;
                margin-top: 51%;
            }
            #mask p{
                text-align: center;
                font-size: .8rem;
                color: rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <div id="mask">
            <img src="image/luyin.gif" alt="">
            <p>录音中······</p>
        </div>
        <button id="start" class="ui-btn ui-btn-primary">按住  说话</button>
        <!-- <button id="stop" class="ui-btn ui-btn-primary" disabled>停止</button> -->
        <div id="audio-container"></div>
        <script src="js/recorder.js"></script>
        <script>
            // window.onload = function(){
                var start = document.querySelector('#start');
                // var stop = document.querySelector('#stop');
                var container = document.querySelector('#audio-container');
                var recorder = new Recorder({
                    sampleRate: 44100, //采样频率,默认为44100Hz(标准MP3采样率)
                    bitRate: 128, //比特率,默认为128kbps(标准MP3质量)
                    success: function(){ //成功回调函数
                        // start.disabled = false;
                    },
                    error: function(msg){ //失败回调函数
                        alert(msg);
                    },
                    fix: function(msg){ //不支持H5录音回调函数
                        alert(msg);
                    }
                });
                var mask = document.getElementById('mask');
                var start = document.querySelector('#start');
                start.addEventListener('touchstart',function(){
                   timer = setTimeout(function(){
                  console.log(1)
                  var audio = document.querySelectorAll('audio');
                    for(var i = 0; i < audio.length; i++){
                        if(!audio[i].paused){
                            audio[i].pause();
                        }
                    }
                    start.innerHTML="松开  结束"
                   mask.style.display="block"
                    recorder.start();
                },500);
                        });
                 start.addEventListener('touchmove',function(){
                   timeOutEvent = setTimeout(function(){
                  clearTimeout(timer);
                   timer = 0;
                        });
                 })
                   start.addEventListener("touchend", function (e) {
                   console.log('touchend');
                   recorder.stop();
                   mask.style.display="none"
                    recorder.getBlob(function(blob){
                        var audio = document.createElement('audio');
                        audio.src = URL.createObjectURL(blob);
                        audio.controls = true;
                        container.appendChild(audio);
                    });
                    start.innerHTML="按住  说话"
                   clearTimeout(timer);
                   return false;
               });
        </script>
    </body>
</html>

 

 下面是项目所依赖的js

下载地址:https://github.com/OmegaMibai/SoundRecording/tree/master/recorder/js

本文为原创文章,请注意保留出处!
修复群晖Synology Drive client右键菜单缺失问题 Local, clean & environmental 作者:Pastore Antonio
1806 浏览量
1779 浏览量
configure: error: Package requirements (oniguruma) were not met Local, clean & environmental 作者:Pastore Antonio
1524 浏览量
Adobe Acrobat Pro 激活 Local, clean & environmental 作者:Pastore Antonio
1519 浏览量
追寻日出,找回自己 Local, clean & environmental 作者:Pastore Antonio
1488 浏览量