เมื่อเตรียมสร้างอินเทอร์เฟซการแชทบนเว็บ คุณควรมีอีโมติคอน รูปภาพ และไฟล์ที่อัปโหลด ลืมวิดีโอไปได้เลย ยังคงต้องใช้เสียง
บทความนี้บันทึกการบันทึกออนไลน์และการอัพโหลดไปยังเซิร์ฟเวอร์โดยใช้โปรแกรมบันทึกบน GitHub บนหน้าเว็บ
รหัสการบันทึกโค้ดตัวอย่างนี้รองรับการใช้งานบนพีซี, Android และ IOS (Safari เท่านั้น) หากคุณใช้ RecordApp คุณสามารถเพิ่มการรองรับสำหรับ IOS (เบราว์เซอร์ WeChat, แอปเพล็ต)
การดำเนินการเพียงครั้งเดียวดีกว่าการอ่านโค้ดหลายพันครั้ง สร้างไฟล์ HTML ใหม่ คัดลอกโค้ดสามส่วนต่อไปนี้ลงในไฟล์ แล้วดับเบิลคลิกที่เบราว์เซอร์เพื่อเปิดเพื่อทดสอบ
<!-- ขั้นแรกให้โหลดไลบรารีการบันทึก js หมายเหตุ: คุณควรโคลน js ในเครื่องเพื่อใช้ --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder mp3.min.js></script><input type=button onclick=startRec() value=เริ่มการบันทึก><hr><input type=button onclick=playRec() value=สิ้นสุดและเล่น><ประเภทอินพุต=ปุ่ม onclick=uploadRec() value=สิ้นสุดและอัปโหลด><script>var rec;ฟังก์ชัน startRec(){ rec=Recorder();//ใช้การกำหนดค่าเริ่มต้น รูปแบบ MP3//เปิด การอนุญาตไมโครโฟนเพื่อรับทรัพยากรที่เกี่ยวข้อง rec.open(function(){ //เริ่มการบันทึก rec.start(); },function(msg,isUserNotAllow){ //ผู้ใช้ปฏิเสธการอนุญาตหรือเบราว์เซอร์ไม่รองรับการแจ้งเตือน((isUserNotAllow? The user rejected allowance, :)+canable to record:+msg); });};</script> อัปโหลดรหัสเซิร์ฟเวอร์ <script>function uploadRec(){ //หยุดการบันทึกและรับไฟล์บันทึก blob binary object คุณสามารถทำทุกอย่างที่คุณต้องการ rec.stop(function(blob,duration){ /* blob file object ซึ่งสามารถอ่านได้ด้วย เนื้อหา FileReader หรืออัปโหลดโดยใช้ FormData ในตัวอย่างนี้ ไฟล์ไบนารี่จะถูกอัปโหลดโดยตรง สำหรับการอัปโหลดแบบฟอร์ม application/x-www-form-urlencoded แบบธรรมดา โปรดดูตัวอย่างใน github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //มันไม่ต่างจากแบบฟอร์มทั่วไป แบ็กเอนด์รับไฟล์ที่มีพารามิเตอร์ upfile และชื่อไฟล์คือ recorder.mp3 //ใช้ ajax เพื่ออัปโหลดโดยตรง var xhr=ใหม่ XMLHttpRequest (); xhr.open(POST, http://baidu.com/, เปลี่ยนเป็นที่อยู่อัพโหลดของคุณ);//ที่อยู่ปลอมนี้สามารถดูข้อมูลคำขอและรูปแบบในเครือข่ายคอนโซล ผลลัพธ์คำขอไม่เกี่ยวข้อง xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ alert(xhr.status==200?Upload Success: หากต้องการทดสอบ โปรดเปิดคอนโซลของเบราว์เซอร์ก่อน จากนั้นจึงบันทึกอีกครั้ง ในแท็บเครือข่าย คุณสามารถดูการอัปโหลดได้ ขอข้อมูลและจัดรูปแบบ); } } xhr.send(form); },function(msg){ alert(การบันทึกล้มเหลว:+msg); };</script> เล่นรหัสตอนนี้ <script>function playRec(){ //หยุดการบันทึก รับไฟล์บันทึก blob binary object ทำทุกอย่างที่คุณต้องการ rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio.controls= true; document.body.appendChild(audio); // มันง่ายมากที่จะรับ blob audio url audio.src=URL.createObjectURL(blob); },function(msg){ alert(การบันทึกล้มเหลว:+msg); });};</script>-------------------------------------------------- -------------------------------------------------- ----------------------------------
เครื่องบันทึกที่อยู่ GitHub: https://github.com/xiangyuecn/Recorder
การทดสอบออนไลน์: คลิกที่นี่เพื่อทดสอบ
Recorder ใช้สำหรับการบันทึก HTML5 เป็นไลบรารี js ที่รองรับเบราว์เซอร์มือถือและพีซีส่วนใหญ่ที่ใช้ getUserMedia รวมถึงเคอร์เนล Tencent Android X5 (QQ, WeChat)
เอาต์พุตการบันทึกจะอยู่ในรูปแบบ MP3 โดยค่าเริ่มต้น และรูปแบบ wav เป็นทางเลือก (ไฟล์บันทึกในรูปแบบนี้มีขนาดใหญ่มาก) รองรับรูปแบบ ogg, webm และ amr อย่างจำกัด และรองรับการขยายรูปแบบใดๆ (หากมีตัวเข้ารหัสที่เกี่ยวข้อง) ).
กะทัดรัด: หากไม่มีข้อกำหนดพิเศษสำหรับขนาดของไฟล์บันทึก คุณสามารถใช้ตัวเข้ารหัสหลักการบันทึก + wav ได้ ซอร์สโค้ดมีความยาวน้อยกว่า 300 บรรทัด และเครื่องบันทึกที่ถูกบีบอัด.wav.min.js มีขนาดน้อยกว่า 4kb . MP3 ได้รับการเข้ารหัสโดยใช้ lamejs และเครื่องบันทึกที่บีบอัด.mp3.min.js จะมีขนาด 54kb หลังจากเปิด gzip
เนื่องจากมีเพียง Safari เท่านั้นที่รองรับ getUserMedia บน IOS (11. เบราว์เซอร์, มินิโปรแกรม web-view) และ RecordApp ยังให้การสนับสนุน Hybrid App ที่ดีกว่าอีกด้วย
เนื่องจาก RecordApp ต้องการบัญชีสาธารณะ (สมัครสมาชิก) ของ WeChat เพื่อให้รองรับการบันทึก JsSDK การพัฒนาจึงทำได้ยากขึ้น แต่รองรับสภาพแวดล้อมได้มากขึ้น สามารถใช้เครื่องบันทึกได้ทันทีเมื่อแกะกล่อง โปรดดูตารางด้านล่างว่าจะใช้เครื่องใด:
| สนับสนุน | เครื่องบันทึก | บันทึกแอป |
|---|---|---|
| เบราว์เซอร์พีซี | ||
| เบราว์เซอร์ Android | ||
| Android WeChat (รวมถึงมินิโปรแกรม) | ||
| แอพ Android ไฮบริด | ||
| ไอโอเอส ซาฟารี | ||
| IOS WeChat (รวมถึงมินิโปรแกรม) | ||
| แอป iOS ไฮบริด | ||
| เบราว์เซอร์อื่นๆ สำหรับ IOS | ||
| ความยากลำบากในการพัฒนา | เรียบง่าย | ซับซ้อน |
| การพึ่งพาบุคคลที่สาม | ไม่มี | พึ่งพาบัญชีอย่างเป็นทางการของ WeChat |
* คุณสามารถตรวจสอบซอร์สโค้ด RecordApp ได้ใน github ซึ่งอยู่ในไดเร็กทอรี xiangyuecn/Recorder/app-support-sample
ข้างต้นคือการบันทึกหน้าเว็บ HTML5 และอัปโหลดไปยังเซิร์ฟเวอร์ที่โปรแกรมแก้ไขแนะนำ รองรับฟังก์ชัน PC, Android และ IOS WeChat ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและ บรรณาธิการจะตอบกลับคุณในเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!