zoukankan      html  css  js  c++  java
  • 基于recorder.js H5录音功能

    兼容性

    1.Chrome,FF,Edge,QQ,360(注:现有IE和Safari全版本不兼容)
    2.其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持
    3.请尝试使用FF,Edge,360,浏览器进行体验,或将项目下载到本地通过localhost的方式

    下载 recorder.js

    前往 https://github.com/OmegaMibai/SoundRecording/tree/master/recorder/js

    核心文件

    核心代码

    html

    <div id="mask">
        <img class="imagestu" src="./images/luyin.gif" alt="">
        <p>录音中······</p>
    </div>
    <button id="start" class="ui-btn ui-btn-primary">按住说话</button>
    <div id="audio-container" class="audio-container">
         <audio controls ref="audio" src="" id="audio" class="Reading_MP3 audio" id="bofang"></audio>
    </div>
    

    css

    .ui-btn {
        z-index: 9999; 
        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: 0.1rem; 
        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: 0.2rem;
         50%;
        margin-left: 25%;
        padding: 0.1rem 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; 
    }
    .imagestu{
        display: block;
        40%;
        margin: auto;
    }
    #mask{
        position: fixed;
         50%;
        left: 25%;
        top: 40%;
        background: rgba(0,0,0,0.05);
        padding:0.2rem 0.1rem;
       z-index: 9999;
       background-color: #fefefe;
       border-radius: 0.1rem;
       display: none;
    }
    #mask p{
        text-align: center;
        font-size: 0.24rem;
        color: rgba(0,0,0,0.5);
    }
    

    js

    <script>
        var start = document.querySelector('#start');
        var audio = document.querySelector('#audio');
        var recorder = new Recorder({
            sampleRate: 44100, //采样频率,默认为44100Hz(标准MP3采样率)
            bitRate: 128, //比特率,默认为128kbps(标准MP3质量)
            success: function(){ //成功回调函数
                // start.disabled = false;
            },
            error: function(msg){ //失败回调函数
                console.log(msg);
            },
            fix: function(msg){ //不支持H5录音回调函数
                console.log(msg);
            }
        });
        var mask = document.getElementById('mask');
        var start = document.querySelector('#start');
        start.addEventListener('touchstart',function(){
           timer = setTimeout(function(){
            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){
                audio.src = URL.createObjectURL(blob);
                audio.controls = true;
            });
            start.innerHTML="按住说话"
           clearTimeout(timer);
           return false;
       });
    </script>
    
    

    引入文件

    <script src="./js/recorder.js"></script>
    

    效果

    点击按键直接录音

    松开按键可直接本次录音

    使用方法

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

    API

    //开始录音
    recorder.start();
    //停止录音
    recorder.stop();
    //获取MP3编码的Blob格式音频文件
    recorder.getBlob(function(blob){ //获取成功回调函数,blob即为音频文件
    //  ...
    },function(msg){ //获取失败回调函数,msg为错误信息
    //  ...
    });
    
  • 相关阅读:
    hdu1238 Substrings
    CCF试题:高速公路(Targin)
    hdu 1269 迷宫城堡(Targin算法)
    hdu 1253 胜利大逃亡
    NYOJ 55 懒省事的小明
    HDU 1024 Max Sum Plus Plus
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1257 最少拦截系统
    HDU 1069 Monkey and Banana
    HDU 1104 Remainder
  • 原文地址:https://www.cnblogs.com/Alangc612/p/12157860.html
Copyright © 2011-2022 走看看