How to Record Audio Using the MediaStream API

This tutorial demonstrates building a web application for audio recording and server-side storage using the Media Capture and Streams API (MediaStream API). Users record audio, save it to the server, and view/play saved recordings. The server-side is implemented with Node.js and Express, while the client-side uses HTML, CSS (Bootstrap), and JavaScript.

Key Features:

• Client-Side Recording: The MediaStream API handles microphone access and audio recording. A simple interface with a record button controls the process.
• Server-Side Storage: A Node.js/Express server with Multer middleware manages audio file uploads and storage in a designated directory.
• Playback and Management: Users can play back their saved recordings directly from the webpage. A discard option allows deletion of recordings.

Server Setup (Node.js & Express):

1. Project Initialization: Create a project directory, initialize npm (npm init -y), and install dependencies (npm i express nodemon multer).
2. Server Creation (index.js): A basic Express server is created to handle routing and file uploads.
3. Multer Integration: Multer middleware is configured to handle file uploads, saving them to the uploads directory with timestamps for unique filenames.
4. API Endpoints: Two API endpoints are defined: /record (POST) for uploading recordings and /recordings (GET) for retrieving a list of saved recordings.
5. Server Start: The server is launched using npm start.

Recording Page (Client-Side):

1. HTML Structure: An HTML page (public/index.html) is created with a record button, an audio player container, and a container to display saved recordings. Bootstrap is used for styling.
2. CSS Styling (public/assets/css/index.css): CSS styles the interface elements.
3. JavaScript Logic (public/assets/js/record.js): JavaScript handles user interaction, recording using getUserMedia, and uploading using the Fetch API. Event listeners manage recording start/stop, saving, discarding, and playback.

Workflow:

1. User clicks the record button.
2. The browser prompts for microphone access.
3. Upon permission, audio recording begins.
4. On stop, the recording is saved as a Blob.
5. The user can save or discard the recording.
6. Saved recordings are uploaded to the server via the /record endpoint.
7. The /recordings endpoint retrieves a list of saved files for display on the page.

Conclusion:

This tutorial provides a comprehensive guide to building a functional audio recording application. The use of the MediaStream API and a well-structured server-side component ensures a robust and user-friendly experience. Further enhancements could include more advanced features such as file validation, user authentication, and improved UI elements.

FAQs about the MediaStream API:

• What is the MediaStream API? A web API for capturing, manipulating, and streaming audio and video.
• How does it work? Provides access to multimedia streams from devices (microphone, camera) via JavaScript.
• Audio and Video Support? Supports both.
• Video Capture? Use getUserMedia to access the camera.
• Screen Sharing? Possible, but may require additional browser permissions.

The above is the detailed content of How to Record Audio Using the MediaStream API. For more information, please follow other related articles on the PHP Chinese website!