Hướng dẫn can javascript record audio? - javascript có thể ghi lại âm thanh không?

Ảnh của Maik Jonietz trên unplash

Bài đăng này trình bày cách tạo và sử dụng API ghi âm trong JavaScript. Ghi âm có thể là một tính năng khá gọn gàng để thêm vào trang web của bạn. Vì vậy, khóa lên!an audio recording API in JavaScript. Audio Recording can be a pretty neat feature to add to your website. So, buckle up!

Bản ghi âm thanh API hình ảnh demo

Điều này được viết có liên quan đến API thiết bị truyền thông và API ghi âm phương tiện được ghi lại trong MDN cũng như bài đăng của Bryan Jennings, được tìm thấy ở đây.

Để hiểu cách thực hiện API ghi âm, tôi sẽ hướng dẫn bạn các bước để giúp bạn hiểu chức năng của các phần khác nhau của mã nguồn. Làm thôi nào! 🎙😀

1. Tạo một đối tượng đại diện cho API ghi âm

Để bắt đầu, chúng ta phải xác định cấu trúc của API và sau đây cho thấy cấu trúc cơ bản cho API ghi âm.

Đối tượng API hiển thị 3 chức năng, đó là:

• Bắt đầu (): Hàm sẽ bắt đầu ghi âm.: The function that will start the audio recording.
• Dừng (): Hàm sẽ dừng ghi âm.: The function that will stop the audio recording.
• Hủy (): Hàm sẽ hủy ghi âm.: The function that will cancel the audio recording.

Lưu ý rằng các hàm start () và stop () trả về một lời hứa vì cả hai hàm sẽ được xử lý với logic không đồng bộ. that the start() and stop() functions return a promise as both functions will be dealing with asynchronous logic.

2. Phát hiện sự hỗ trợ của API MediaDevices và phương thức GetUserMedia trong trình duyệt

Trước khi sử dụng API MediaDevices, cho phép bạn truy cập vào các thiết bị phương tiện được kết nối như micrô hoặc phương thức getusermedia () trên API đó, bạn nên đảm bảo hỗ trợ trình duyệt của tính năng này.

Mã sau đây là mã phát hiện tính năng cho phương thức API MediaDevices và GetUserMedia ().

Mã phát hiện phải được thêm vào trước dòng mã đầu tiên sử dụng phương thức API và nó. Trong trường hợp này, nó sẽ là dòng đầu tiên của hàm start ().

Nếu tính năng không được hỗ trợ bởi trình duyệt chạy mã, hàm start () sẽ trả về một lỗi tùy chỉnh khi lời hứa bị từ chối. Việc từ chối sẽ gây ra một lỗi sẽ bị bắt bởi phương thức Catch () trong ứng dụng gọi khi API được tiêu thụ. Tại thời điểm đó, bạn có thể cảnh báo người dùng để cho anh ta biết.

Mã sau đây cho thấy cách ứng dụng của bạn có thể phát hiện và xử lý việc thiếu hỗ trợ trình duyệt cho tính năng ghi âm.

3. Tạo luồng âm thanh

Để bắt đầu ghi âm, một luồng âm thanh phải được tạo. Điều này được thực hiện bằng cách gọi phương thức getUserMedia () trên giao diện Navigator.Mediadevices.

Để sử dụng phương thức getUserMedia (), bạn phải truyền một đối tượng MediastreamConstraints cho nó. Đối tượng này xác định loại phương tiện để yêu cầu. Trong trường hợp của chúng tôi, chúng tôi muốn phương tiện âm thanh, vì vậy đối tượng ràng buộc sẽ trông giống như sau:

{ audio: true }

Getusermedia () sẽ trả lại một lời hứa và khi lời hứa đó giải quyết, luồng âm thanh sẽ được tạo thành công và có sẵn trong chức năng gọi lại .then của lời hứa đó như một đối tượng của Mediastream.

Một đối tượng Mediastream là một luồng các bản nhạc của loại phương tiện được yêu cầu, trong đó mỗi bản nhạc thuộc loại MediasTreamTrack.

Mã sau đây cho thấy việc tạo luồng âm thanh trong hàm start (), trong đó tham số ràng buộc chỉ yêu cầu âm thanh.

Người dùng sẽ được yêu cầu cấp quyền truy cập vào thiết bị truyền thông vào thời điểm này nếu quyền không được cấp trước đó vì nó yêu cầu đối với truy cập thiết bị phương tiện. Nếu người dùng từ chối quyền truy cập, điều này sẽ dẫn đến NotAllowedError..

Lời hứa tạo luồng âm thanh có thể bị từ chối vì nhiều lý do, trong đó đối tượng lỗi thuộc loại Domexception. Bảng sau đây giải thích các lỗi từ chối có thể như được giải thích trong tài liệu web MDN.MDN Web Docs.

Lưu ý: Không có lỗi nào bị bắt trong API ghi âm vì bất kỳ .then nào trong ứng dụng sau .catch trong API ghi âm âm thanh sẽ được thực thi. Vì vậy, việc bắt một lỗi trong API won đã kích hoạt lỗi trong ứng dụng gọi. No error will be caught in the audio recording API as any .then chaining in the application after a .catch in the audio recording API will be executed. So, catching an error in the API won’t trigger the error back in the calling application.

Mã sau đây thể hiện cấu trúc xử lý lỗi để thêm vào ứng dụng của bạn dựa trên những trường hợp bạn muốn xử lý.

4. Bắt đầu ghi âm

Sau khi Mediastream được tạo thành công, luồng sẽ được chuyển cho hàm tạo MediareCorder để tạo ra một ví dụ MediareCorder của luồng đã cho. API MediareCorder cung cấp các chức năng ghi âm phương tiện.

Để bắt đầu ghi, hàm start () trên mediareCorder phải được gọi. Hàm này ghi lại phương tiện từ luồng vào một hoặc nhiều đối tượng Blob

Hàm start () trên mediareCorder có thể lấy một tham số tùy chọn được gọi là timeslice, được giải thích trong tài liệu web MDN như:MDN Web Docs as:

Số lượng mili giây để ghi vào mỗi Blob.

Dựa trên giá trị timeslice, sự kiện MediareCorder.DataAvailable sẽ kích hoạt một đốm âm thanh mỗi khi thời lượng timeslice trôi qua cho đến khi hết phương tiện âm thanh.dataavailable event will fire an audio Blob each time the timeslice duration passes until it runs out of audio media.

Trong API ghi âm, timeslice sẽ không được thông qua, điều này sẽ ghi lại phương tiện truyền thông vào một đốm màu và cuối cùng kích hoạt sự kiện một lần. Đó là trừ khi phương thức requestData được gọi, có được blob được lưu cho đến nay và kích hoạt việc tạo ra một blob mới mà phương tiện truyền thông sẽ tiếp tục ghi lại vào thay thế.

Tuy nhiên, nếu bạn quyết định vượt qua đối số timeslice, hãy đảm bảo lưu trữ tất cả các đốm âm thanh bị kích hoạt trong danh sách để tạo ra một blob duy nhất sau khi bản ghi kết thúc, nếu đó là cách tiếp cận mong muốn của bạn.

Lưu ý: Hàm bắt đầu đặt MediareCorder.state từ .then1 đến .then2 khi bản ghi bắt đầu thành công. Bảng sau đây giải thích các trạng thái khác nhau của MediareCorder dựa trên tài liệu web MDN. The start function sets the MediaRecorder.state from .then1 to .then2 when the recording successfully starts. The following table explains the different states of the MediaRecorder based on MDN Web Docs.

Mã sau đây cho thấy việc bắt đầu ghi âm, trong đó (các) blob âm thanh, phiên bản MediareCorder và luồng được ghi là các thuộc tính được duy trì trong suốt API để sử dụng trong các chức năng khác khi cần thiết.

Hàm start () trong API ghi âm sẽ trả về một lời hứa sẽ được trả lại cho ứng dụng gọi. Khi lời hứa đó giải quyết, ứng dụng gọi sẽ biết rằng bản ghi âm đã bắt đầu thành công thông qua việc thực hiện .then3CallbackFunction. Tại thời điểm đó, ứng dụng gọi có thể phản ánh thông tin đó trong giao diện người dùng.

Trong mã sau, khi chức năng start () bắt đầu ghi thành công, văn bản .then4 sẽ được ghi vào bảng điều khiển bằng ứng dụng gọi.

Nếu có sự cố với chức năng API START () của Ghi âm API, một lỗi sẽ được ném cho ứng dụng gọi để bắt. Bảng sau đây giải thích các lỗi có thể như được giải thích trong tài liệu web MDN.MDN Web Docs.

Lưu ý: Nếu trình duyệt không thể bắt đầu hoặc tiếp tục ghi âm, một sự kiện Domerror sẽ được kích hoạt và sự kiện MediareCorder.DataAvailable sẽ được kích hoạt để bắn Blob mà nó thu thập được cho đến nay. Sau đó, sự kiện MediareCorder.stop sẽ bị sa thải.If the browser could not start or continue the recording, a DOMError event will be fired and the MediaRecorder.dataavailable event will be triggered to fire the blob it gathered so far. After that, the MediaRecorder.stop event will be fired.

5. Ngừng ghi lại

Để dừng ghi âm, phương thức stop () trên mediareCorder phải được gọi. Khi phương thức Stop () được gọi, điều sau đây diễn ra:

1. MediareCorder.state được đặt thành .then1 và phương tiện bắt giữ dừng lại.state is set to .then1 and the media capturing stops.
2. Một sự kiện MediareCorder.DataAvailable kích hoạt Blob đại diện cho âm thanh được ghi lại.dataavailable event fires the Blob that represents the recorded audio.
3. Một sự kiện MediareCorder.stop được bắn.stop event is fired.

Lưu ý: Nếu phương thức stop () được gọi trong khi mediarecorder.state là .then1, một lỗi không hợp lệ sẽ bị kích hoạt do cố gắng ngăn chặn một phương tiện truyền thông bắt giữ mà Lừa đã dừng. If the stop() method is called while the MediaRecorder.state is .then1, an InvalidState error will be fired as a result of trying to stop a media capturing that’s already stopped.

Để cung cấp tính năng ghi dừng trong API ghi âm của chúng tôi, hàm stop () sẽ được triển khai. Hàm này sẽ trả về một lời hứa giải quyết cho âm thanh được ghi dưới dạng một đốm sáng một khi bản ghi đã dừng lại. Một lời hứa sẽ được mong đợi từ phương pháp này vì quá trình dừng ghi là không đồng bộ.

Các thành phần chính của hàm stop () thực sự đang dừng bản ghi bằng cách gọi phương thức stop () trên mediareCorder trong khi cũng nghe sự kiện mediareCorder. Blob âm thanh thu được.stop event to return the recorded audio as a Blob once the recording has successfully stopped and the full audio Blob is obtained.

Mặc dù điều này có vẻ như đủ, nhưng việc đó sẽ không ngăn được bản ghi màu đỏ nhấp nháy trong tab Trình duyệt trang web của bạn. Lý do cho điều đó là khi chúng ta dừng MediareCorder, luồng vẫn sẽ hoạt động. Do đó, luồng cần phải dừng lại. Để dừng một luồng hoạt động, tất cả các bản nhạc trên đó phải được dừng lại. Trong trường hợp của chúng tôi, nó là một bản nhạc truyền thông duy nhất.

Mã sau đây cho thấy việc dừng ghi âm, bao gồm đặt lại các thuộc tính API sau khi bản ghi đã dừng.

Trong ứng dụng gọi, bạn có thể chỉ cần gọi hàm stop () trên API và chờ giải quyết.

6. Hủy ghi

Để thực hiện chức năng hủy trong API ghi âm, bạn chỉ cần lặp lại mọi thứ chúng tôi đã triển khai trong hàm stop () ở bước 5. Sự khác biệt duy nhất là sự kiện MediareCorder.stop sẽ không được xử lý vì chúng tôi sẽ không trả lại Âm thanh Blob đến ứng dụng gọi khi bản ghi đã bị hủy.5. The only difference is that the MediaRecorder.stop event will not be handled as we will not be returning the audio Blob to the calling application as the recording has been cancelled.

Mã sau đây cho thấy việc hủy ghi âm. Để tránh dự phòng mã, chúng tôi trích xuất tất cả mọi thứ từ hàm stop () vào hàm hủy (), không bao gồm trình xử lý sự kiện mediareCorder.stop. Sau đó, chúng tôi sẽ chỉ cần gọi hàm hủy () từ hàm stop ().stop event handler. We will then simply call the cancel() function from the stop() function.

Trong ứng dụng gọi, bạn chỉ cần gọi hàm hủy () trên API và chờ giải quyết.

Mã bản demo

Bản demo mã này cho thấy việc sử dụng API ghi âm được giải thích có thể được sử dụng trong trang web của bạn.

Trong bản demo mã, bạn sẽ có thể:

1. Bắt đầu ghi âm
2. Dừng hoặc hủy ghi âm
3. Nghe bản ghi âm được phát lại khi dừng

Lưu ý: Codepen nhúng có thể không hoạt động trong một số trình duyệt khi nó chặn truy cập micrô. Trong trường hợp như vậy, chỉ cần mở bản demo bằng liên kết này và nó sẽ hoạt động như một sự quyến rũ.: The embedded CodePen might not work in some browsers as it blocks microphone access. In such case, just open the demo using this link and it will work like a charm.

Bạn cũng có thể sao chép mã nguồn từ GitHub của tôi bằng cách sử dụng liên kết sau.