Cara merakam audio menggunakan API MediaStream

Tutorial ini menunjukkan membina aplikasi web untuk rakaman audio dan penyimpanan sisi pelayan menggunakan API Penangkapan dan Stream Media (MediaStream API). Pengguna merekodkan audio, simpan ke pelayan, dan lihat/bermain rakaman yang disimpan. Bahagian pelayan dilaksanakan dengan Node.js dan Express, manakala pihak klien menggunakan HTML, CSS (Bootstrap), dan JavaScript.

Ciri -ciri Utama:

• Rakaman sisi klien: API MediaStream mengendalikan akses mikrofon dan rakaman audio. Antara muka mudah dengan butang rekod mengawal proses.
• Penyimpanan sisi pelayan: pelayan node.js/express dengan multer middleware menguruskan muat naik fail audio dan penyimpanan dalam direktori yang ditetapkan.
• Playback and Management: Pengguna boleh memainkan semula rakaman mereka yang disimpan terus dari halaman web. Pilihan pembuangan membolehkan penghapusan rakaman.
Persediaan pelayan

(node.js & express):

1. Inisialisasi Projek: Buat direktori projek, Inisialisasi NPM (), dan Pasang Ketergantungan (). npm init -y npm i express nodemon multer Penciptaan pelayan (index.js):
pelayan ekspres asas dibuat untuk mengendalikan routing dan muat naik fail.
2. Integrasi Multer:
Multer middleware dikonfigurasi untuk mengendalikan muat naik fail, menyimpannya ke direktori
3. dengan cap waktu untuk fail filen yang unik. Titik akhir API API: dua titik akhir API ditakrifkan: uploads (pos) untuk memuat naik rakaman dan
(mendapatkan) untuk mendapatkan senarai rakaman yang disimpan.
4. Server Mula: /record Pelayan dilancarkan menggunakan /recordings.
5. Halaman rakaman (klien-sisi): npm start

Struktur HTML: Halaman HTML () dicipta dengan butang rekod, bekas pemain audio, dan bekas untuk memaparkan rakaman yang disimpan. Bootstrap digunakan untuk gaya.

1. CSS Styling (): gaya CSS elemen antara muka. public/index.html
2. logik javascript (): JavaScript mengendalikan interaksi pengguna, rakaman menggunakan public/assets/css/index.css, dan memuat naik menggunakan API Fetch. Pendengar acara menguruskan rakaman permulaan/berhenti, menyimpan, membuang, dan main balik.
3. public/assets/js/record.js aliran kerja: getUserMedia
1. Pengguna mengklik butang Rekod.
2. penyemak imbas meminta akses mikrofon.
3. Setelah kebenaran, rakaman audio bermula.
4. berhenti, rakaman disimpan sebagai gumpalan.
5. Pengguna boleh menyimpan atau membuang rakaman.
6. rakaman yang disimpan dimuat naik ke pelayan melalui titik akhir /record.
7. endpoint /recordings mengambil senarai fail yang disimpan untuk paparan pada halaman.



Kesimpulan:

Tutorial ini menyediakan panduan komprehensif untuk membina aplikasi rakaman audio berfungsi. Penggunaan API MediaStream dan komponen sisi pelayan berstruktur memastikan pengalaman yang mantap dan mesra pengguna. Peningkatan selanjutnya boleh termasuk ciri -ciri yang lebih canggih seperti pengesahan fail, pengesahan pengguna, dan elemen UI yang lebih baik.

Soalan Lazim Mengenai MediaStream API:

• Apakah API MediaStream? API web untuk menangkap, memanipulasi, dan streaming audio dan video.
Bagaimana ia berfungsi?
• Menyediakan akses kepada aliran multimedia dari peranti (mikrofon, kamera) melalui JavaScript. sokongan audio dan video?
menyokong kedua -duanya.
• penangkapan video?
Gunakan
• untuk mengakses kamera. getUserMedia Perkongsian skrin?
mungkin, tetapi mungkin memerlukan kebenaran penyemak imbas tambahan.

Atas ialah kandungan terperinci Cara merakam audio menggunakan API MediaStream. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!