Máy ghi âm javascript

Cho những người mới bắt đầu

khởi động nhanh cho người mới bắt đầu

Khái niệm cơ bản về máy ảnh

Tải dữ liệu

Dành cho chuyên gia

Khởi động nhanh nâng cao

tùy biến

Đào tạo phân tán

Phần Nâng cao có nhiều ví dụ về sổ ghi chép hướng dẫn, bao gồm Dịch máy thần kinh, Máy biến áp và CycleGAN

JavaScript là một ngôn ngữ rất linh hoạt và nó cung cấp nhiều hỗ trợ API để làm nhiều việc hữu ích. Ở đây, một điều quan trọng là việc ghi lại âm thanh hoặc video trong các trang web cũng được thực hiện bằng JavaScript. Trong trường hợp này, nó sẽ yêu cầu người dùng cấp quyền truy cập micrô vào trình duyệt và ghi lại âm thanh qua micrô và lưu các khối dữ liệu âm thanh dưới dạng giá trị nhị phân trong một mảng và khi chúng tôi phát âm thanh, hãy truy xuất dữ liệu mâm cặp và bắt đầu phát. Điều tương tự cũng xảy ra với video, khi chúng tôi thực hiện hội nghị truyền hình thì điều này thực sự xảy ra trong máy chủ, chỉ có điều là ở đây chúng tôi phát video trên cùng một trang và trong trường hợp hội nghị truyền hình, video sẽ phát ở đầu bên kia

Toàn bộ điều này xảy ra bằng cách sử dụng một API, đó là MediaRecorder API. API này cung cấp chức năng ghi phương tiện như âm thanh hoặc video. Nó được tạo bằng hàm tạo MediaRecorder[]

Ở đây chúng tôi sử dụng một thuộc tính của JavaScript, đó là thuộc tính mediaDevices, được sử dụng để truy cập vào các thiết bị phương tiện đầu vào được kết nối như micrô, webcam, v.v. Thuộc tính này sử dụng phương thức getUserMedia[] để có quyền truy cập micrô, webcam, v.v. Phương thức này trả về một lời hứa cho đối tượng navigator

Chào mừng bạn đến với hướng dẫn dành cho nhà phát triển Android. Các tài liệu này hướng dẫn bạn cách xây dựng ứng dụng Android bằng cách sử dụng API trong Android framework và các thư viện khác

Nếu bạn là người mới sử dụng Android và muốn bắt đầu viết mã, hãy bắt đầu với hướng dẫn Xây dựng ứng dụng đầu tiên của bạn

Và xem các tài nguyên khác này để tìm hiểu về phát triển Android

• phòng thí nghiệm lập trình. Các hướng dẫn ngắn, theo nhịp độ của từng người bao gồm một chủ đề riêng biệt. Hầu hết các phòng thí nghiệm lập trình đều hướng dẫn bạn quy trình xây dựng ứng dụng nhỏ hoặc thêm tính năng mới vào ứng dụng hiện có
• khóa học. Lộ trình đào tạo có hướng dẫn hướng dẫn bạn cách xây dựng ứng dụng Android

Mặt khác, sau đây là tuyển tập nhỏ các hướng dẫn thiết yếu dành cho nhà phát triển mà bạn nên làm quen

Micrô là một cách tuyệt vời để đưa âm thanh vào máy tính của bạn và với sức mạnh của Web Audio API, bạn có thể làm được nhiều việc với âm thanh đó

Trong bài viết này, chúng ta sẽ xem xét cách sử dụng phương thức getUserMedia[] để truy cập đầu vào micrô, sau đó xử lý đầu vào đó trong thời gian thực bằng Web Audio. Chúng ta cũng sẽ xem cách lưu âm thanh đã xử lý dưới dạng. tập tin wav

Nội dung hiển thị

JavaScript có thể truy cập micrô không?

Cách sử dụng getUserMedia[]

Cách sử dụng âm thanh trên web để xử lý âm thanh

A là gì. Tệp WAV?

Từ micrô đến. Wav Sử dụng GetUserMedia và Web Audio

bài viết liên quan

JavaScript có thể truy cập micrô không?

Có, JavaScript có thể truy cập đầu vào micrô với sự trợ giúp của WebRTC

WebRTC [Web Real-Time Communication] là công nghệ cho phép các trình duyệt web giao tiếp trực tiếp với nhau mà không cần máy chủ trung gian.

Một trong những tính năng của WebRTC là API getUserMedia[], cho phép chúng tôi truy cập đầu vào micrô và sử dụng nó trong các ứng dụng web của chúng tôi

API getUserMedia[] là một phần của tiêu chuẩn WebRTC và có sẵn trong hầu hết các trình duyệt hiện đại

Cách sử dụng getUserMedia[]

Phương thức getUserMedia[] được sử dụng để yêu cầu quyền truy cập micrô từ người dùng

Khi được gọi, nó sẽ mở ra lời nhắc quyền yêu cầu người dùng cho phép trang web truy cập micrô

Nếu người dùng cấp quyền, thì phương thức getUserMedia[] sẽ trả về đối tượng MediaStream, đại diện cho luồng dữ liệu âm thanh từ micrô

Sau đó, chúng ta có thể sử dụng đối tượng MediaStream này trong ứng dụng Web Audio của mình

Cách sử dụng âm thanh trên web để xử lý âm thanh

Web Audio là API JavaScript để xử lý và phát âm thanh trong trình duyệt web

Nó có thể được sử dụng để tạo hiệu ứng âm thanh tùy chỉnh, xử lý và tổng hợp âm thanh hoặc tạo các ứng dụng âm thanh phức tạp.

Web Audio API cung cấp một cách mạnh mẽ và linh hoạt để xử lý dữ liệu âm thanh trong trình duyệt

Trong bài viết này, chúng tôi sẽ sử dụng Web Audio API để nhận đầu vào micrô và biến nó thành một. tập tin wav

A là gì. Tệp WAV?

Một. tệp wav là tệp âm thanh kỹ thuật số lưu trữ dữ liệu dạng sóng

Dữ liệu dạng sóng là biểu diễn biên độ của sóng âm thanh theo thời gian

Các tệp WAV thường được sử dụng để lưu trữ dữ liệu âm thanh trên PC và cũng là định dạng phổ biến để lưu trữ dữ liệu âm thanh trên đĩa CD

Từ micrô đến. Wav Sử dụng GetUserMedia và Web Audio

Trước tiên, chúng tôi sẽ cần quyền truy cập vào micrô mà chúng tôi có thể thực hiện bằng cách sử dụng API getUserMedia

if [!navigator.getUserMedia]

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||

                      navigator.mozGetUserMedia || navigator.msGetUserMedia;

if [navigator.getUserMedia]{

    navigator.getUserMedia[{audio:true}, success, function[e] {

    alert["Error capturing audio."];

    }];

} else alert["getUserMedia not supported in this browser."];

Đối số đầu tiên của API getUserMedia[] là mô tả về những gì chúng tôi quan tâm để có được quyền truy cập vào [e. g. , micrô], trong khi nếu chúng tôi muốn truy cập vào máy ảnh, chúng tôi sẽ cung cấp một đối tượng có bật cờ video

navigator.getUserMedia[{video:true}, success, function[e] {

    alert["Error capturing video."];

}];

Hai đối số đầu tiên là các cuộc gọi lại sẽ được gọi khi truy cập phần cứng thành công hoặc thất bại. Khi người dùng nhấp vào "Cho phép" thông qua bảng này, cuộc gọi lại thành công sẽ được kích hoạt

Sau khi người dùng đã cấp quyền sử dụng micrô, chúng tôi cần truy vấn các mẫu PCM; . Nếu bạn chưa nghiên cứu về Thông số kỹ thuật âm thanh trên web, bạn sẽ hoảng hốt bởi bề mặt rộng lớn và đáng sợ như thế nào khi bạn nhìn thấy nó lần đầu tiên, bởi vì với chúng, bạn có thể thực hiện nhiều tác vụ khác nhau như bộ lọc âm thanh, tổng hợp. . Tất cả những gì chúng tôi yêu cầu là các mẫu PCM được lưu trữ trong bộ chứa WAV bằng cách sử dụng ArrayBuffer để thực hiện tất cả những điều đó

Vì vậy, người dùng của chúng tôi đã chấp thuận, bây giờ chúng tôi sẽ tạo ngữ cảnh âm thanh và bắt đầu thu thập dữ liệu âm thanh

function success[e]{

    // creates the audio context

    audioContext = window.AudioContext || window.webkitAudioContext;

    context = new audioContext[];

    // retrieve the current sample rate to be used for WAV packaging

    sampleRate = context.sampleRate;

    // creates a gain node

    volume = context.createGain[];

    // creates an audio node from the microphone incoming stream

    audioInput = context.createMediaStreamSource[e];

    // connect the stream to the gain node

    audioInput.connect[volume];

    /* From the spec: This value controls how frequently the audioprocess event is

    dispatched and how many sample-frames need to be processed each call.

    Lower values for buffer size will result in a lower [better] latency.

    Higher values will be necessary to avoid audio breakup and glitches */

    var bufferSize = 2048;

    recorder = context.createJavaScriptNode[bufferSize, 2, 2];

    recorder.onaudioprocess = function[e]{

        console.log ["recording"];

        var left = e.inputBuffer.getChannelData [0];

        var right = e.inputBuffer.getChannelData [1];

        // we clone the samples

        leftchannel.push [new Float32Array [left]];

        rightchannel.push [new Float32Array [right]];

        recordingLength += bufferSize;

    }

    // we connect the recorder

    volume.connect [recorder];

    recorder.connect [context.destination];

}

Phương thức createJavaScriptNode lấy tham số đầu tiên là kích thước bộ đệm mà bạn muốn truy xuất, như tôi đã lưu ý trong các nhận xét, giá trị này sẽ ảnh hưởng đến tần suất sự kiện xử lý âm thanh được gửi đi. Chọn một số thấp để có độ trễ tối ưu, chẳng hạn như 2048 [hãy nhớ rằng đó phải là lũy thừa của hai]

Chúng tôi gọi API getChannelData cho mỗi kênh [trái và phải] và lấy bộ đệm Float32Array mới cho mỗi kênh mà chúng tôi sao chép [xin lỗi GC], sau đó lưu trữ thành hai Mảng riêng biệt mỗi khi sự kiện được gửi đi

Bạn có thể sử dụng hằng số tùy chỉnh để mã của bạn không bị xáo trộn. Tuy nhiên, do chúng không có độ dài không xác định, chúng ta phải dự phòng Mảng đơn giản thay vì Float32Arrays

Tại sao chúng ta phải nhân bản các kênh? . Khi kênh được phát lại, các con trỏ tới các mẫu hiện tại được giữ nguyên;

Khi chúng tôi có các mảng bộ đệm, chúng tôi cần làm phẳng từng kênh

function mergeBuffers[channelBuffer, recordingLength]{

  var result = new Float32Array[recordingLength];

  var offset = 0;

  var lng = channelBuffer.length;

  for [var i = 0; i < lng; i++]{

    var buffer = channelBuffer[i];

    result.set[buffer, offset];

    offset += buffer.length;

  }

  return result;

}

Chúng ta có thể xen kẽ hai kênh khi chúng phẳng

function interleave[leftChannel, rightChannel]{

  var length = leftChannel.length + rightChannel.length;

  var result = new Float32Array[length];

  var inputIndex = 0;

  for [var index = 0; index < length; ]{

    result[index++] = leftChannel[inputIndex];

    result[index++] = rightChannel[inputIndex];

    inputIndex++;

  }

  return result;

}

Sau đó, chúng tôi thêm chức năng tiện ích writeUTFBytes nhỏ

function writeUTFBytes[view, offset, string]{

  var lng = string.length;

  for [var i = 0; i < lng; i++]{

    view.setUint8[offset + i, string.charCodeAt[i]];

  }

}

Bây giờ bạn có thể bắt đầu gói WAV bản ghi và nếu cần, bạn có thể sửa đổi biến âm lượng [từ 0 thành 1]

var leftBuffer = mergeBuffers [ leftchannel, recordingLength ];

var rightBuffer = mergeBuffers [ rightchannel, recordingLength ];

// we interleave both channels together

var interleaved = interleave [ leftBuffer, rightBuffer ];

// create the buffer and view to create the .WAV file

var buffer = new ArrayBuffer[44 + interleaved.length * 2];

var view = new DataView[buffer];

// write the WAV container, check spec at: //ccrma.stanford.edu/courses/422/projects/WaveFormat/

// RIFF chunk descriptor

writeUTFBytes[view, 0, "RIFF"];

view.setUint32[4, 44 + interleaved.length * 2, true];

writeUTFBytes[view, 8, "WAVE"];

// FMT sub-chunk

writeUTFBytes[view, 12, "fmt "];

view.setUint32[16, 16, true];

view.setUint16[20, 1, true];

// stereo [2 channels]

view.setUint16[22, 2, true];

view.setUint32[24, sampleRate, true];

view.setUint32[28, sampleRate * 4, true];

view.setUint16[32, 4, true];

view.setUint16[34, 16, true];

// data sub-chunk

writeUTFBytes[view, 36, "data"];

view.setUint32[40, interleaved.length * 2, true];

// write the PCM samples

var lng = interleaved.length;

var index = 44;

var volume = 1;

for [var i = 0; i < lng; i++]{

    view.setInt16[index, interleaved[i] * [0x7FFF * volume], true];

    index += 2;

}

// our final binary blob that we can hand off

var blob = new Blob [ [ view ], { type : "audio/wav" } ];

Rõ ràng, nếu việc đóng gói WAV trở nên quá tốn kém, bạn nên thuê một nhân viên nền tảng thuê ngoài. Bây giờ chúng ta có thể lưu đốm màu vào một tệp hoặc làm bất cứ điều gì chúng ta muốn với nó. Bây giờ chúng tôi có thể lưu nó cục bộ hoặc từ xa, chỉnh sửa nó hoặc thậm chí xuất bản nó. Bạn cũng có thể thử bản demo trực tiếp để thưởng thức nhiều hơn