Dengan maraknya aplikasi sosial seperti WeChat, obrolan suara telah menjadi fitur yang wajib dimiliki oleh banyak aplikasi, mulai dari aplikasi sosial yang menggunakan obrolan suara sebagai fungsi utamanya hingga aplikasi e-niaga dengan fungsi layanan pelanggan suara dan suara pelayan toko obrolan telah menjadi sangat diperlukan.
Namun, banyak orang merasa bahwa suara sisi web jauh dari kita, dan ini lebih merupakan pekerjaan aplikasi lokal. Faktanya, tidak demikian halnya dengan perkembangan Html5, fungsi suara secara bertahap menjadi salah satunya fungsi yang harus dimiliki di front-end.
Mengapa kita harus mempelajari suara HTML5?1. Spesifikasi Html5 semakin maju, dan pembaruan ponsel telah mempercepat pembaruan sistem operasi. Fungsi suara akan menjadi salah satu tugas utama front-end, seperti kanvas saat ini. Implementasi front-end pengembangan fungsi suara lebih cepat dan menghemat lebih banyak tenaga kerja (ini berarti menghemat uang untuk bos, dan menghemat uang untuk bos berarti memberi diri Anda kenaikan gaji)
2. Meskipun aplikasi lokal kini memiliki fungsi suara, memahami berbagai kendala interaksi suara front-end dapat membuat kolega Anda memiliki hubungan yang lebih harmonis dan kolaborasi yang lebih lancar daripada saling berkelahi.
3. Memahami teknologi baru dapat mencegah wawancara, dan kedua, Anda dapat memprediksi tren teknologi, sehingga Anda tidak akan mempelajari banyak keterampilan membunuh naga atau mematuhi aturan. Ini lebih kondusif untuk menjaga pengetahuan dan daya saing inti profesional Anda puncak rantai makanan.
4. Kebanyakan orang di front end salah paham tentang fungsi suara, mereka mengira fungsi suara hanyalah tag audio HTML5.
Tintanya tidak banyak, mari kita kembangkan proyek kecil saja dan semuanya akan jelas. Mari kita lihat renderingnya terlebih dahulu.
papan klip.png
Logika bisnisnya sangat sederhana,
Ini persis sama dengan metode WeChat kami. Saat Anda menekan, kata akan dilepaskan hingga berakhir, dan ucapan akan direkam. Saat Anda melepaskannya, kata tersebut akan ditekan hingga berakhir, dan suara akan dikirim ke pihak lain pada saat yang bersamaan.
Mari kita lakukan langkah demi langkah. Pertama, mari kita selesaikan halaman html.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>WeChat Voice</title> <link rel=stylesheet href=css/record.css></head><body> <div id=wrap> <header id=header> <div id=left> <i class=material-icons> chevron_left </i> WeChat(184) </div> <div id=mid>Aida·Wang</div > <div id=kanan> <i class=material-icons> more_horiz </i> </div> </header> <div id=contentWrap> <ul id=chatList> <li class=item_me> <div class=chatContent>Apakah saya orang yang paling Anda cintai? <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Lari saudara! (Rolling calf) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Saya tidak akan banyak bicara di sini Oke, ini dia sekumpulan kode... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Saudara Dabin, mengapa kamu begitu baik? Aku merasa seperti lautan saat melihatmu<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Tua Nak, apakah kamu sudah jatuh cinta padaku... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Tidak, saya mabuk laut, aku merasa ingin muntah saat melihatmu... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <catatan kaki id=footer> <div id=keyboard> <i class=material-icons> keyboard </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Tekan untuk berbicara</span> < /div> <div id=icon><i class=material-icons> sentiment_satisfied </i></div> <div id=add><i class=material-icons> tambahkan_circle_outline </i></div> </footer> </div></body></html>
bagian css,
*{ margin: 0; padding: 0;}ul li{ gaya daftar: tidak ada;}html,body{ tinggi: 100%; lebar: 100%; overflow: tersembunyi;}body{ latar belakang: #ebebeb;}@font -wajah { font-family: 'Ikon Material'; gaya font: normal; berat font: 400; url(../css/iconfont/MaterialIcons-Regular.eot); /* Untuk IE6-8 */ src: lokal('Ikon Material'), lokal('MaterialIcons-Regular'), url(../css/ iconfont/MaterialIcons-Regular.woff) format('woff2'), url(../css/iconfont/MaterialIcons-Regular.woff2) format('woff'), url(../css/iconfont/MaterialIcons-Regular.ttf) format('truetype'); font-family: 'Ikon Material'; berat font: normal; gaya font: normal; 32px; /* Ukuran ikon yang disukai */ tampilan: blok sebaris; /* tinggi baris: 0,01rem; */ transformasi teks: tidak ada; arah: ltr; /* Dukungan untuk semua browser WebKit. */ -webkit-font-smoothing: antialias; /* Dukungan untuk Safari dan Chrome */ rendering teks: mengoptimalkan Keterbacaan; /* Dukungan untuk Firefox. */ -moz-osx-font-smoothing: skala abu-abu; /* Dukungan untuk IE. */ pengaturan fitur font: 'liga'; : kolom; justify-content: spasi-antara; tinggi: 100%;}#header{ tinggi: 46 piksel; tinggi garis: 46 piksel; #363539; tampilan: flex; align-items: center; warna: #fff; justify-content: space-between;}#header #left{ tampilan: flex; align-items: ukuran font: 14 piksel; 100px;}#header #kanan{ tampilan: flex; align-items: tengah; lebar: 100px; justify-content: flex-end;}#header #kanan i{ padding-kanan: 6px;}#header #mid{ text-align: center; flex: 1;}#contentWrap{ flex: 1; overflow-y:auto;}.item_me,.item_audio{ display: align-items : mulai fleksibel; justify-content:flex-end; padding: 8px;}.item_you{ tampilan: flex; align-items: flex-start; justify-content:flex-start; padding: 8px;}.avatar{ lebar: 40px; tinggi: 40px;}.avatar img{width: 100%;}.item_me .chatContent{ padding: 10px; : 1px solid #6fb44d; margin-kanan: 15px; 5px; posisi: relatif;}.chatContent span{width:0; height:0; ukuran font:0; overflow:hidden; position:absolute;}.item_me .chatContent span.bot{ border-width:8px; gaya: solid putus-putus; warna batas: transparan transparan #6fb44d kanan:-17px; atas:10px;}.item_me .chatContent span.top{ lebar batas:8 piksel; gaya batas: garis putus-putus padat; warna batas: transparan transparan #a0e75a ; #a0e75a; batas: 1px padat #6fb44d; 15px; radius batas: 5px; posisi: relatif;} .item_you .chatContent span.bot{ lebar batas:8px; gaya perbatasan:solid putus-putus putus-putus: transparan #6fb44d transparan transparan ; top:10px;}.item_you .chatContent span.top{ lebar batas:8px; putus-putus; : flex; menyelaraskan-item: tengah; warna: #7f8389; spasi-sekitar;}#sayBtn{ flex: 1; tampilan: flex; margin: 0 5px; warna:#565656; font-weight: bold;}.sendBtn{ tampilan: flex: 1; #f4f5f6; batas:1px padat #bec2c1; radius batas: 5px; center;}.activeBtn{ tampilan: blok; flex: 1; padding: 8px; latar belakang: #c6c7ca; batas:1px solid #bec2c1; perataan teks: tengah;}.item_audio .chatContent{ padding: 6 piksel; latar belakang: #fff; batas: 1 piksel padat #999; margin-kanan: 15px; posisi: relatif; lebar:120px; tinggi minimum: 20px;}.item_audio .chatContent span.bot{ lebar batas:8px; #999; kanan:-17px; atas:10px;}.item_audio .chatContent span.top{ lebar batas:8px; gaya batas:solid putus-putus; warna batas:transparan transparan #fff ; kanan:-15px; atas:10px;} .material-icons_wifi{ transform: putar(90deg); ; ukuran font: 22px;}.redDot{ latar belakang: #f45454; radius batas: 50%; 8px; tinggi: 8px; margin-kanan: 10px;} Di sini saya ingin menyebutkan dua hal yang perlu diperhatikan:1.html bagian:
Untuk menghindari masalah, saya tidak memotong gambar pada tingkat piksel. Untuk menghemat masalah, saya langsung menggunakan ikon svg
https://material.io/tools/icons/?style=outline
2.bagian css: gunakan tata letak fleksibel. Saya hanya ingin menjelaskan fungsi Html5, jadi flex tidak menulis metode penulisan kompatibilitas. Selain itu, harap perhatikan metode penulisan bagian header Aplikasi yang sangat umum digunakan.
Mari kita bicara tentang bagian kunci js.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>WeChat Voice</title> <link rel=stylesheet href=css/record.css> <script> document.addEventListener('DOMContentLoaded', function () { var oSendBtn = document.getElementById('sendBtn'); var soundClips = document.querySelector('.sound-clips'); var mediaRecorder; var oChatList = document.getElementById(' daftar obrolan'); navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); { audio: true }) // Panggilan balik berhasil .then(function (stream) { rec(stream);) // Kesalahan panggilan balik .catch(function (err) { } } else { } function rec(stream) { mediaRecorder = new MediaRecorder(stream); ', function (ev) { ev.preventDefault(); this.innerHTML = 'Rilis ke akhir'; this.classList.add('activeBtn'); mediaRecorder.start(); }, false); oSendBtn.addEventListener('touchend', function (ev) { ev.preventDefault(); this.innerHTML = 'Tekan untuk berbicara' ; this.classList.remove('activeBtn'); mediaRecorder.stop(); = fungsi (e) { var clipContainer = dokumen.createElement('li'); var audio = dokumen.createElement('audio'); clipContainer.classList.add('item_audio'); redDot></div> <div class=chatContent> <i class=material-icons material-icons_wifi>wifi</i> <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div>`; , ''); oChatList.appendChild(clipContainer); var audioURL = window.URL.createObjectURL(e.data.src = audioURL); oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') kembali; audio.play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode .anak-anak[0]) }, salah }; } }, salah); id=wrap> <header id=header> <div id=left> <i class=material-icons> chevron_left </i> WeChat(184) </div> <div id=mid>Aida·Wang</div > <div id=kanan> <i class=material-icons> more_horiz </i> </div> </header> <div id=contentWrap> <ul id=chatList> <li class=item_me> <div class=chatContent>Apakah saya orang yang paling Anda cintai? <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Lari, saudara! (Rolling calf) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Saya tidak akan banyak bicara di sini Oke, ini dia sekumpulan kode... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Saudara Dabin, mengapa kamu begitu baik? Aku merasa seperti lautan saat melihatmu<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Tua Nak, apakah kamu sudah jatuh cinta padaku... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Tidak, saya mabuk laut, aku merasa ingin muntah saat melihatmu... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <catatan kaki id=footer> <div id=keyboard> <i class=material-icons> keyboard </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Tekan untuk berbicara</span> < /div> <div id=icon><i class=material-icons> sentiment_satisfied </i></div> <div id=add><i class=material-icons> tambahkan_circle_outline </i></div> </footer> </div></body></html>Ada banyak hal yang perlu diperhatikan saat mengimplementasikan fungsi perekaman video di sini. Mari kita bahas satu per satu.
Hal pertama,
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( { audio: benar }) // Panggilan balik berhasil .then(function (stream) { rec(stream); }) // Kesalahan panggilan balik .catch(function (err) { } } else { }Saat Anda melihat beberapa antarmuka HTML5 untuk perekaman, Anda melihat ini
Navigator.getUserMedia()
Hati-hati. Ini adalah standar lama dan sudah dihapuskan
navigator.mediaDevices.getUserMedia
Aspek suara pada multimedia HTML5 telah mengalami beberapa kali perubahan dan sangat berantakan.Beberapa tag bahkan belum diimplementasikan di browser, dan sudah layu sebelum berkembang waktu. Anda hanya perlu tahu apa yang saya katakan. Ini sudah cukup, karena Anda tahu bahwa masa lalu yang ditinggalkan tidak ada gunanya. Jika Anda punya waktu, Anda sebaiknya memainkan permainan LOL atau King of Glory (walaupun saya tidak punya waktu. Saya tidak mengerti perbedaan antara keduanya, tapi kedua permainan ini seharusnya menyenangkan) Ya, saya belum pernah memainkannya jadi saya tidak mengerti).
Anda tidak perlu memahami apa yang ada di dalamnya. Anda tidak perlu mengetahui apa itu janji dan apa itu aliran media.
Kode di atas sama dengan menyalakan keran (atau menekan tombol rekam pada alat perekam), maka kita harus mempunyai sesuatu untuk menampung air. Kita bisa menggunakan penanak nasi (atau selotip untuk alat perekam) untuk memasangnya di bawah kran dan lihat masuk. ci (artinya syuting di kampung halaman), kode berikut ini
mediaRecorder = new MediaRecorder(stream);
Langkah selanjutnya adalah menekan tombol dan semuanya akan siap. Perekam yang sesuai berarti setelah merekam, tekan tombol untuk memutar. Namun, untuk memutar di program kami, Anda tidak hanya harus memiliki kaset, tetapi juga perekam . Perekam adalah tag audio. Jika tidak ada yang mudah dilakukan, kami akan membuat yang baru. Tidak ada objek baru di dunia ini yang tidak berani diprogram oleh programmer. Jika satu objek baru tidak cukup, hanya ada dua objek baru. Kode lainnya tidak memiliki kekurangan selain menakutkan, itu sungguh keterlaluan.
mediaRecorder.ondataavailable = fungsi (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); div class = redDot></div> <div class=chatContent> <i class=material-icons material-icons_wifi>wifi</i> <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </ div>`; audio.setAttribute('kontrol', ''); oChatList.appendChild(clipContainer); window.URL.createObjectURL(e.data); audio.src = audioURL; oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') kembali; audio. bermain(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0]) }, PALSU); };Faktanya, itu direkam dan disiarkan.
Oke, apakah ini sangat sederhana? Izinkan saya membahas beberapa poin tentang keseluruhan proyek:
1. Memiliki struktur yang masuk akal dalam diagram pemotongan adalah prasyarat bagi Anda untuk menjalankan fungsinya nanti. Jika strukturnya dibuat dengan baik, itu akan menghemat masalah nanti. Pikirkan tentang Zhuge Liang, yang membangun struktur HTML5 sebelum dia masih pemula . Ada tiga bagian.
2. Dasar yang kuat dari js dan ES6 asli dapat memberi Anda ide berbeda. Misalnya, saya menggunakan delegasi acara dan mesin templat ES6 di sini. Khusus untuk delegasi event, akan merepotkan untuk mencari node jika tidak digunakan. Selain itu, kode akan mudah berantakan jika diulang.
3. Pengetahuan dan teknologi baru sebenarnya tidak rumit. Faktanya, keduanya sangat sederhana. Jika teknologi baru tidak bertujuan untuk membuat fungsi menjadi lebih baik dan menyelesaikan masalah kita, lalu mengapa harus mengembangkan teknologi baru? Karena orang-orang berbadan besar berjanggut lebat itu khawatir diberi tahu oleh atasannya bahwa beban kerjanya tidak cukup padahal tidak ada pekerjaan? Teknologi ada untuk memecahkan masalah dan membuat hidup kita lebih baik.
4. Proyek ini tidak akan berfungsi di bawah IOS 11 atau lebih rendah, karena metode ini tidak didukung sebelum IOS 11.2, dan Anda memerlukan pengembang aplikasi lokal IOS untuk memberikan dukungan, tetapi tidak masalah di Android. Dan dapat diperkirakan bahwa dalam beberapa tahun IOS akan didukung secara asli tanpa memberikan Anda dukungan, sehingga efisiensi pengembangan Anda akan jauh lebih tinggi. Jangan berpikir bahwa teknologi ini masih jauh. HTML5 hanya akan tersedia secara komersial selama sekitar 15 tahun (berapa tahun yang dibutuhkan agar vue, react, dan angle dapat digunakan dalam skala besar?). yang siap.
Masih banyak detail dan poin yang perlu diperhatikan dalam keseluruhan proyek. Saya harap Anda benar-benar bisa mengetiknya sendiri, karena Anda memahami artikel saya dan kemampuan Anda menggunakan teknologi ini adalah dua hal yang berbeda lebih jauh lagi di jalan menuju ujung depan (ingatlah untuk sering kembali untuk membaca Lihat ^_^).
MeringkaskanDi atas adalah pengenalan editor tentang penggunaan multimedia Html5 untuk mengimplementasikan fungsi suara WeChat. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!
Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!