Sebuah proyek beberapa waktu lalu adalah mengembangkan perangkat kursus audio. Pada dasarnya, setelah mengimpor dokumen, gambar, dan sumber daya lainnya, halaman menjadi tata letak seperti PPT, dan kemudian memilih gambar dapat menyisipkan audio dan model pengeditan global. Ada dua cara untuk mengimpor audio, satu dengan mengimpor dari perpustakaan sumber daya, dan yang lainnya dengan menyebutkan rekamannya.
Sejujurnya, saya belum pernah mengenal Audio API HTML5 pada awalnya, dan kami harus mengoptimalkannya berdasarkan kode sebelum kami mengambil alih. Tentu saja, ada banyak jebakan yang terlibat. Kali ini saya juga akan berbicara tentang perasaan saya seputar jebakan tersebut (inisialisasi dan perolehan beberapa objek dasar akan dihilangkan karena konten tersebut bukan fokus kali ini. Siswa yang tertarik dapat mencari MDN. sendiri.
Sebelum mulai merekam, Anda harus terlebih dahulu mengetahui apakah perangkat saat ini mendukung Audio API. Metode sebelumnya navigator.getUserMedia telah digantikan oleh navigator.mediaDevices.getUserMedia. Biasanya, sebagian besar browser modern sekarang mendukung penggunaan navigator.mediaDevices.getUserMedia. Tentu saja, MDN juga menyediakan informasi kompatibilitas.
const promisifiedOldGUM = function(constraints) { // Pertama-tama dapatkan getUserMedia, jika ada const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || dengan kesalahan // untuk menjaga antarmuka yang konsisten if (!getUserMedia) { return Promise.reject( new Error('getUserMedia tidak diterapkan di browser ini') } // Jika tidak, akhiri panggilan ke navigator.getUserMedia lama dengan Promise return new Promise(function(resolve, reject) { getUserMedia.call (navigator, kendala, penyelesaian, penolakan });}; // Browser lama mungkin tidak mengimplementasikan mediaDevices sama sekali, jadi kami menetapkan objek kosong terlebih dahulu (navigator.mediaDevices === tidak terdefinisi) { navigator.mediaDevices = {};} // Beberapa browser mengimplementasikan sebagian mediaDevices. Kita tidak bisa menetapkan objek // dengan getUserMedia karena akan menimpa properti yang sudah ada.// Di sini, kita hanya akan menambahkan properti getUserMedia jika tidak ada.if (navigator.mediaDevices.getUserMedia === tidak terdefinisi) { navigator.mediaDevices.getUserMedia = promisifiedOldGUM;}
Karena metode ini tidak sinkron, kami dapat memberikan perintah ramah untuk perangkat yang tidak kompatibel.
navigator.mediaDevices.getUserMedia(constraints).then( function(mediaStream) { // Sukses }, function(error) { // Kegagalan const { name } = error; let errorMessage; switch (name) { // Pengguna menolak case ' NotAllowedError': case 'PermissionDeniedError': errorMessage = 'Pengguna telah melarang halaman web memanggil perangkat perekam'; // Perangkat perekam tidak terhubung case 'NotFoundError': case 'DevicesNotFoundError': errorMessage = 'Perangkat perekaman tidak ditemukan'; rusak; // Kasus kesalahan lainnya 'NotSupportedError': errorMessage = 'Fungsi perekaman tidak didukung'; log (kesalahan); } kembalikan pesan kesalahan });
Jika semuanya berjalan dengan baik, kita dapat melanjutkan ke langkah berikutnya.
(Metode memperoleh konteks dihilangkan di sini, karena kali ini bukan fokusnya)
Mulai merekam, jeda perekamanAda poin khusus di sini, yaitu perlu ditambahkan variabel perantara untuk mengidentifikasi apakah pencatatan sedang dilakukan. Karena di browser firefox kami menemukan masalah, proses perekaman berjalan normal, namun saat kami klik untuk menjeda ternyata tidak bisa dijeda. Metode ini tidak memungkinkan. Metode ini memerlukan pemutusan semua koneksi. Kemudian, saya menemukan bahwa variabel perantara this.isRecording harus ditambahkan untuk menentukan apakah perekaman sedang berlangsung. Ketika start diklik, setel ke true dan ketika dijeda, setel ke false.
Ketika kita mulai merekam, akan ada acara mendengarkan rekaman pada proses audio. Jika benar dikembalikan, aliran akan ditulis. Jika salah dikembalikan, maka tidak akan ditulis. Oleh karena itu, nilailah this.isRecording, dan jika salah, langsung kembalikan
// Beberapa inisialisasi const audioContext = new AudioContext(); const sourceNode = audioContext.createMediaStreamSource(mediaStream); const scriptNode = audioContext.createScriptProcessor( BUFFER_SIZE, INPUT_CHANNELS_NUM, OUPUT_CHANNELS_NUM);sourceNode.connect(this.scriptNode);scriptNode.connect(this.audioContext.destination); // Pantau proses perekaman scriptNode.onaudioprocess = event => { if (!this.isRecording) kembali; Perekaman rutin this.buffers.push(event.inputBuffer.getChannelData(0)); Dapatkan data saluran saat ini dan tuliskan ke dalam array};
Tentu saja akan ada jebakan di sini, yaitu tidak dapat digunakan lagi. Dilengkapi dengan metode untuk mendapatkan durasi rekaman saat ini, karena sebenarnya ini bukan jeda sebenarnya, tetapi streaming tidak tertulis. Jadi kita juga perlu mendapatkan durasi rekaman saat ini, yang perlu diperoleh melalui rumus.
const getDuration = () => { return (4096 * this.buffers.length) / this.audioContext.sampleRate // 4096 adalah panjang streaming, sampleRate adalah laju pengambilan sampel}
Dengan cara ini Anda bisa mendapatkan durasi perekaman yang benar.
akhir rekamanUntuk mengakhiri rekaman, saya menjedanya terlebih dahulu, lalu melakukan mendengarkan atau operasi lain jika diperlukan, lalu mengatur panjang larik aliran penyimpanan ke 0.
Dapatkan frekuensigetVoiceSize = penganalisa => { const dataArray = new Uint8Array(analyser.frekuensiBinCount); penganalisa.getByteFrequencyData(dataArray const data = dataArray.slice(100, 1000); a + b); jumlah pengembalian;};
Untuk detailnya, silakan merujuk ke https://developer.mozilla.org/zh-CN/docs/Web/API/AnalyserNode/frekuensiBinCount
lainnya
Sebagian besar masalah yang saya temui kali ini adalah masalah kompatibilitas, sehingga saya mengalami banyak kendala, terutama di sisi seluler, pada awalnya ada masalah penulisan durasi rekaman yang salah sehingga menyebabkan langsung terhenti. Pengalaman ini juga menutupi beberapa celah dalam API HTML5. Tentu saja, yang paling penting adalah mengingatkan semua orang bahwa dokumentasi API asli semacam ini diperoleh secara sederhana dan kasar dengan melihat langsung MDN!
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.