Làm cách nào để ghi lại giọng nói của người dùng bằng Javascript/PHP?

Question

Tôi hiện đang cố gắng tạo trang web thử nghiệm cho phép người dùng ghi lại ghi chú thoại và lưu ghi chú đó vào tài khoản của họ. Cách tốt nhất để làm điều này bằng cách sử dụng PHP hoặc JavaScript là gì?

Các bước mà tôi đang tìm kiếm quy trình này là:

1) Người dùng nhấp vào nút ghi. 2) Bắt đầu trình tự ghi âm. 3) Dừng trình tự. 4) Đặt tên tập tin và gửi nó đến máy chủ.

Truy vấn chính của tôi tập trung vào Bước thứ hai, nơi tôi cần một số cơ chế tương tác với micrô của người dùng để ghi âm giọng nói. Tôi vẫn còn mới để phát triển web và tôi không biết làm thế nào tôi có thể gọi ghi âm bằng cách sử dụng JavaScript.

Khi tìm kiếm trong Google, tôi đã tìm thấy một số liên kết trong StackOverflow giải quyết các sự cố tương tự nhưng câu trả lời không hữu ích. Rất nhiều giải pháp chỉ ra Flash nhưng tôi muốn tránh điều đó càng nhiều càng tốt. Vì vậy, câu hỏi của tôi không đun sôi xuống "Có thể ghi lại giọng nói bằng JavaScript không? Nếu có, làm thế nào?"

Xin cảm ơn trước.

Answer 1

API âm thanh HTML5 không được hỗ trợ rộng rãi trong các trình duyệt, tôi nghĩ rằng nó hoạt động trong Chrome và Firefox đã có nó gần đây được thêm vào nightlies ... Tiền tố trình duyệt được yêu cầu ở giai đoạn này nhưng API chung là ...

navigator.getUserMedia({audio: true}, function(stream) { /* do stuff */ }); 

Vì vậy, đó sẽ là webkitGetUserMedia cho Chrome và mozGetUserMedia cho Firefox.

Tùy chọn phù hợp hơn ngay bây giờ là thông qua các plugin trình duyệt như Flash hoặc Java hoặc để tạo ứng dụng khách trên máy tính để bàn mà người dùng cần cài đặt.

Tài nguyên của getUserMedia quan tâm liên quan đến:

• Intro to getUserMedia
• getUserMedia added to Firefox nightlies
• Audio only issues with getUserMedia in Chromium

Câu hỏi sau đây có thể giúp bạn thêm:

tutorial on using flash or java servlet to upload microphone data from browser to server?

Answer 2

Bây giờ bạn có thể ghi lại từ một micro bằng cách tạo ra một biểu đồ âm thanh kết nối MediaStream địa phương của bạn đến một ScriptProcessingNode:

navigator.webkitGetUserMedia({video: true, audio: true}, function(stream) { 
    var audioContext = new webkitAudioContext, 
     mediaStreamSource = context.createMediaStreamSource(stream), 
     processor = context.createJavaScriptNode(4096, 2, 2); 

    processor.onaudioprocess = function(e) { 
     // Process the audio data found in e.inputBuffer 
    }; 

    mediaStreamSource.connect(processor); 
    processor.connect(context.destination); 
}); 

(Sử dụng tiền tố nhà cung cấp Chrome)

Bạn có thể treo này lên đến Websockets hoặc thậm chí XHR đơn giản để gửi các khối đến máy chủ của bạn, có thể xử lý nó thành một tập tin âm thanh.Bạn sẽ cần phải chuyển đổi mỗi kênh từ

phi xen kẽ IEEE 32-bit PCM tuyến tính với một loạt danh nghĩa là -1 -> +1

sang định dạng của sự lựa chọn của bạn.

Một ví dụ tương tự như ghi âm thanh, mã hóa nó thành một tập tin wav, và lưu nó (tất cả các client-side) có thể được tìm thấy ở đây:

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

tin chi tiết về AudioContext:

http://docs.webplatform.org/wiki/apis/webaudio/AudioContext

Answer 3

Cho đến khi bản ghi âm HTML5 đến, bạn thực sự cần phải cùng nhau tạo ra một giải pháp kết hợp Flash và trên thiết bị di động, tải tệp lên. Trên thiết bị di động, màn hình tải lên tập tin thường có đầu ghi âm thanh hoặc video, vì vậy người dùng có thể ghi trực tiếp từ thiết bị của họ.

Nếu thiết bị không có máy ghi âm trong quá trình tải lên tệp, bạn nên sử dụng máy quay video và sau đó chuyển đổi video sang MP3 trên máy chủ. Đó là cách chúng tôi làm điều đó qua nó tại recordmp3online.com.