Mp3LameEncoder 錄音

重點資源下載

mp3-lame-encoder-js

就拿這個source code 來改囉

DEMO

引用方式

<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<!-- <script src="recorder2.js"></script>  另一款不好用 -->
<script>Mp3LameEncoderConfig = { memoryInitializerPrefixURL: "js/mp3-lame/lib/" };</script>
<script src="js/mp3-lame/lib/Mp3LameEncoder.min.js"></script>

關鍵修改

參考JS API文檔 getUserMedia

// 這是各種API 因為瀏覽器互不支援 很麻煩 // web的
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia;

// 初始化
$microphone.click(function() {  
  if (microphone == null)
    navigator.getUserMedia({ audio: true },
      function(stream) { 
        microphone = audioContext.createMediaStreamSource(stream);
        microphone.connect(microphoneLevel);
        $microphone.attr('disabled', true);
        $record.attr('disabled', false); 
        // 設備沒問題 ， 點擊"錄音"鈕開始進行錄音。
      },
      function(error) {
        $microphone[0].checked = false;
        window.alert("沒有音源輸入。");
      });
});

麥克風收音大小

microphoneLevel.gain.value = 0; // 0 ~ 1 沒在收音時 請關閉麥克風 1以上為加強收音量

上傳 & 下載

// save/delete recording
function saveRecording(blob) { 
  $recordingList.empty(); //把列表清空
    var time = new Date(),
      url = URL.createObjectURL(blob), // 錄音資料
      html = "<p recording='" + url + "'>" +
             "<audio controls src='" + url + "' id='audio_src' ></audio> " +
             " <div class='btn btn-default' id='upload'  >" +
             "上傳</div> " +
             "</p>";
  $recordingList.prepend($(html));
  $recordingList.off( "click", '#upload'); // 解除一切綁定事件 ，免得越累積越多事件，寄一堆信
  $recordingList.on('click', '#upload',blob, function(event){
      var name = "等級.wav";

      var reader = new FileReader(); // 
      // this function is triggered once a call to readAsDataURL returns
      reader.onload = function(event){
        var fd = new FormData(); 
        fd.append('fname', name); // 檔名
        fd.append('data', event.target.result); // 觸發資料
        $.ajax({
            type: 'POST',
            url: 'XXX.php', // 參考:PHP心得-> 壓縮音檔 blob
            data: fd,
            dataType:'text',
            processData: false,
            contentType: false,
            beforeSend:function(){
            $('#upload').addClass('hidden'); // 防止 重複上傳
            // 正在上傳中，請稍候。
            }
        }).done(function(data) {
            if(data){ // ===true
            //檔案已上傳 // 試聽錄音
            document.getElementById('audio_src').src="檔名.wav"; 
            }else{
            // 上傳錯誤!! 可以改為將檔案下載下來
            $("p[recording='" + url + "']").append(" <a href='" + url + "'>" + "下載...</a> ");
            $('#upload').removeClass('hidden');
            }
        });
      };      
      // trigger the read from the reader...
      reader.readAsDataURL(blob);

      });
}

移除列表跟錄音檔(blob)

$recordingList.on('click', 'button', function(event) {
  var url = $(event.target).attr('recording');
  $("p[recording='" + url + "']").remove(); // 清空列表
  URL.revokeObjectURL(url); // 移除資源
  $recordingList.empty(); // 清空列表
});

計時器

var t = 0,tlock=1;
showTime();


//顯示倒數秒收
function showTime()
{
    t += 1;
    if(tlock==1){
    var sec = t;
    $('#showTimeinn').html(minSecStr(sec / 60 | 0) + ":" + minSecStr(sec % 60));
      // document.getElementById('showTimeinn').innerHTML= tt;    
      //每秒執行一次,showTime()
      setTimeout("showTime()",1000);
    }
}