Ghi âm thanh html5

Question

Có thể ghi âm với html5 chưa? Tôi đã tải xuống phiên bản chrome canary mới nhất và sử dụng mã sau:

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia ({audio: true}, gotAudio, noStream);

Điều này sau đó sẽ nhắc người dùng cho phép ghi âm và nếu bạn nói "có", một thông báo sẽ xuất hiện cho biết rằng Chrome đang ghi. Tuy nhiên có thể truy cập bộ đệm âm thanh với dữ liệu thô trong đó không? Tôi dường như không thể tìm ra cách. Có những thông số kỹ thuật được đề xuất chưa được triển khai nhưng có ai biết liệu nó có thực sự được thực hiện trên bất kỳ trình duyệt nào ngay bây giờ không và cung cấp hướng dẫn?

Answer 1

Ở đây bạn có thể tìm thấy ví dụ của tôi, nhưng nó không hoạt động (một phần). Bởi vì ghi âm AUDIO chưa được triển khai cho chrome. Đó là lý do tại sao bạn sẽ nhận được một lỗi 404, được cho là không thể tìm thấy BLOB.

Cũng có một biểu mẫu bên dưới vì mục đích của tôi là gửi BLOB tới tệp php, nhưng vì không hoạt động, tôi không thể thử. Lưu nó, bạn có thể sử dụng sau này.

<audio></audio> 
<input onclick="startRecording()" type="button" value="start recording" /> 
<input onclick="stopRecording()" type="button" value="stop recording and play" /> 
<div></div> 
<!-- 
<form enctype="multipart/form-data"> 
<input name="file" type="file" /> 
<input type="button" value="Upload" /> 
</form> 
--> 

<script> 
    var onFailed = function(e) { 
    console.log('sorry :(', e); 
    }; 

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || navigator.msGetUserMedia || 
var localStream 

var audio = document.querySelector('audio'); 
var stop = document.getElementById('stop'); 


    function startRecording(){ 
     if (navigator.getUserMedia) { 
      navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) { 
      audio.src = window.URL.createObjectURL(stream); 
     document.getElementsByTagName('div')[0].innerHTML = audio.src; 
      localStream = stream; 
      }, onFailed); 
     } else { 
      alert('Unsupported'); 
      //audio.src = 'someaudio.ogg'; // fallback. 
     } 
    } 



    function stopRecording(){ 
     localStream.stop(); 
     audio.play(); 
    } 


    function sendAudio(){ 

    } 
</script> 

lưu ý: một số thông tin và howto cho firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

Answer 2

Ghi âm hỗ trợ của API âm thanh và Webkit, tuy nhiên khi API của chúng phát triển, sẽ rất khó để duy trì mã sử dụng chúng.

Dự án nguồn mở đang hoạt động có tên Sink.js cho phép ghi và cũng cho phép bạn đẩy mẫu thô: https://github.com/jussi-kalliokoski/sink.js/. Vì dự án khá tích cực nên họ đã có thể giữ được những thay đổi hàng đầu trong Webkit và Chrome khi chúng xuất hiện.

Answer 3

Bây giờ có thể truy cập vào bộ đệm âm thanh sử dụng API bối cảnh âm thanh và getChannelData().

Dưới đây là một dự án trên GitHub rằng các bản ghi âm thanh trực tiếp ở định dạng MP3 và lưu nó trên máy chủ web: https://github.com/nusofthq/Recordmp3js

Trong recorder.js bạn sẽ thấy như thế nào bộ đệm âm thanh được truy cập độc lập bởi các kênh truyền hình như vậy:

this.node.onaudioprocess = function(e){ 
     if (!recording) return; 
     worker.postMessage({ 
     command: 'record', 
     buffer: [ 
      e.inputBuffer.getChannelData(0), 
      //e.inputBuffer.getChannelData(1) 
     ] 
     }); 
    } 

Đối với một lời giải thích chi tiết hơn về việc thực hiện bạn có thể đọc các bài đăng trên blog sau: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/