Bạn có thể sử dụng trình cắm Trình ghi để ghi vào các trang web HTML5. Sau khi quá trình ghi hoàn tất, bạn sẽ nhận được đối tượng tệp blob, sau đó tải blob lên máy chủ; -in hỗ trợ cả vue2.0 và uniapp, rất mạnh!! ), dạng sóng trực quan sẽ được hiển thị trong quá trình ghi và tương thích với PC, Android và iOS. Một mã hóa có thể chạy ở mọi nơi, haha~ nó. tiết kiệm được rất nhiều thứ.

Bước 1: npm cài đặt gói plugin ghi lõi (Tài liệu GitHub cho Plugin ghi âm | Tài liệu Gitee).

                        
                          npm cài đặt recorder-core

                        
                      

Bước 2: Đưa các plug-in vào các thành phần yêu cầu ghi, cũng như các bộ mã hóa và plug-in trực quan tương ứng với định dạng ghi.

                        
                          // Phần lõi phải được giới thiệu import Recorder from 'recorder-core' // Giới thiệu các tệp hỗ trợ định dạng mp3, nếu bạn cần hỗ trợ nhiều định dạng, hãy đặt các tệp js công cụ mã hóa của các định dạng này ở phía sau và giới thiệu tất cả chúng import 'recorder; -core' /src/engine/mp3' import 'recorder-core/src/engine/mp3-engine' //Chỉ cần sử dụng câu này để ghi ở định dạng wav//import 'recorder-core/src/engine/wav' //Hỗ trợ plug-in tùy chọn, đây là plug-in trực quan hóa dạng sóng import 'recorder-core/src/extensions/waveview' //ts import Mẹo: Gói npm đã đi kèm với tệp khai báo .d.ts (nhưng nó thuộc bất kỳ loại nào)

                        
                      

Bước 3: Đầu tiên viết phần giao diện, 3 nút bấm và 1 vùng hiển thị dạng sóng trực quan.

Bước 4: Mở bản ghi và xin cấp quyền ghi (các phương thức này đều được đặt trong các phương thức, giống như bên dưới).

                        
                          ,recOpen(){ //Tạo đối tượng ghi this.rec=Recorder({ type:"mp3" // Định dạng ghi có thể được thay đổi sang các định dạng khác như wav, sampleRate:16000 // Tốc độ lấy mẫu của bản ghi, giá trị càng lớn thì chi tiết càng tinh tế, bitRate:16. //Tốc độ ghi bit, chất lượng âm thanh càng cao thì càng tốt, onProcess:(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd)=>{ //Gọi lại thời gian thực để ghi âm, lệnh gọi lại này được gọi là khoảng 12 lần mỗi giây // Có thể được vẽ theo thời gian thực Dạng sóng, tải lên (gửi) dữ liệu trong thời gian thực if(this.wave) this.wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate); } }); //Mở bản ghi và xin phép this.rec.open(()=>{ console.log("Việc ghi đã được thực hiện đã mở "); if(this.$refs.recwave){//Tạo đối tượng vẽ đồ họa trực quan hóa âm thanh this.wave=Recorder.WaveView({elem:this.$refs.recwave}); } },(msg,isUserNotAllow)=>{ //Người dùng đã từ chối quyền ghi hoặc trình duyệt không hỗ trợ ghi console.log((isUserNotAllow?"UserNotAllow,">")+"Không thể ghi:"+ tin nhắn); });

                        
                      

Bước 5: Bắt đầu ghi và kết thúc ghi.

                        
                          ,recStart(){ if(!this.rec){ console.error("Chưa bắt đầu ghi");return } this.rec.start(); console.log("Đã bắt đầu ghi"); if(!this.rec){ console.error("Chưa bật tính năng ghi");return } this.rec.stop((blob,duration)=>{ //blob là đối tượng tệp ghi mà chúng tôi muốn, có thể được tải lên hoặc phát cục bộ this.recBlob=blob; //Chỉ cần sử dụng URL để tạo địa chỉ tệp cục bộ, chẳng hạn như gán nó cho. audio.src để phát lại và gán giá trị. Cung cấp a.href và sau đó a.click() để tải xuống (cần cung cấp thuộc tính download="xxx.mp3") var localUrl=(window.URL||webkitURL).createObjectURL (đốm màu); console.log("Ghi thành công",blob,localUrl,"Duration:"+duration+"ms"); this.upload(blob);//Tải tệp blob lên máy chủ this.rec.close();// Đóng Ghi, giải phóng tài nguyên ghi, tất nhiên là không cần giải phóng, sau này bạn có thể gọi start liên tục this.rec=null },(err)=>{ console.error("Lỗi khi kết thúc ghi: "+ lỗi); this.rec.close();//Đóng ghi và giải phóng tài nguyên ghi. Tất nhiên, bạn không cần giải phóng chúng. Bạn có thể gọi start liên tục sau this.rec=null } }

                        
                      

Bước 6: Tải file ghi âm lên máy chủ và nghe trực tiếp cục bộ.

                        
                          ,upload(blob){ //Sử dụng FormData để tải tệp lên bằng cách sử dụng biểu mẫu multipart/form-data //Hoặc chuyển đổi tệp blob sang mã hóa văn bản thuần túy base64 bằng FileReader và sử dụng ứng dụng thông thường/biểu mẫu x-www-form-urlencoded để tải lên var form= new FormData(); //Nó không khác gì biểu mẫu thông thường. Phần phụ trợ nhận tệp có tham số upfile. Tên tệp là record.mp3 form.append("key","value" // Các tham số khác var xhr=new XMLHttpRequest() ; xhr.open("POST", "/upload/xxxx"); xhr.onreadystatechange=()=>{ if(xhr.readyState==4){ if(xhr.status==200){ console.log("Tải lên thành công"); }else{ console.error("Tải lên không thành công"+xhr.status); } ,recPlay(){ //Thử giọng ghi âm phát lại cục bộ, bạn có thể trực tiếp sử dụng URL để chuyển đổi blob thành địa chỉ phát lại cục bộ và sử dụng âm thanh để phát var localUrl=URL.createObjectURL(this.recBlob); var audio=document.createElement("audio"); audio.controls=true; document.body.appendChild(audio); // Bằng cách này bạn có thể chơi nó // Lưu ý rằng bạn cần thu hồiObjectURL khi không sử dụng, nếu không nó sẽ chiếm bộ nhớ setTimeout(function(){ URL.revokeObjectURL(audio.src) },5000 }

                        
                      

File đính kèm: Thêm các phương pháp ghi.

                        
                          rec.open(success,fail) //Mở bản ghi, yêu cầu quyền ghi rec.close() //Đóng ghi, giải phóng tài nguyên micrô rec.start() //Bắt đầu ghi rec.stop(success,fail) //Kết thúc ghi rec.pause() //Tạm dừng ghi rec.resume() //Tiếp tục và tiếp tục ghi //Trình cắm trực quan: Nhập trình cắm thêm WaveView 'recorder-core/src/extensions/waveview' // Plug-in trực quan hóa: Nhập plug-in WaveSurferView 'recorder-core/src/extensions/wavesurfer.view' // Plug-in trực quan hóa: Nhập plug-in FrequencyHistogramView 'recorder-core/src/extensions/ Frequency.histogram. view' import 'recorder-core/ src/extensions/lib.fft' //plug-in BufferStreamPlayer: phát các tập tin clip ghi trong thời gian thực, chuyển đổi các tập tin clip thành nhập luồng MediaStream 'recorder-core/src/extensions/buffer_stream.player' //ASR_Aliyun_Short plug-in: Nhận dạng giọng nói trên Đám mây Alibaba (chuyển giọng nói thành văn bản), hỗ trợ nhận dạng giọng nói theo thời gian thực, nhập tệp âm thanh đơn lẻ vào văn bản 'recorder-core/src/ Extensions/asr.aliyun.short' //Sonic plug-in: nhập plug-in tốc độ và cao độ thay đổi 'recorder-core/src/extensions/sonic'

                        
                      

Kèm theo là địa chỉ kiểm tra trực tuyến của plug-in này: https://xiangyuecn.gitee.io/recorder/.

Sau khi dự án vue3 được đóng gói, hãy đặt nó vào máy chủ và bật truy cập https cùng lúc (bắt buộc phải ghi https, localhost không có hạn chế này), sau đó bạn có thể ghi lại khi bạn mở trang web này trên máy tính, Android , hoặc iOS (nhưng một số trình duyệt không thể ghi, chẳng hạn như UC, Quark, nhưng may mắn thay, hệ thống điện thoại di động có trình duyệt và có thể ghi trong WeChat, hiệu quả vẫn rất tốt).

【qua】 .

Cuối cùng, bài viết này về vue3 triển khai khả năng ghi và tải lên trang web H5 (mp3, wav) tương thích với Android, iOS và PC sẽ kết thúc tại đây. Nếu bạn muốn biết thêm về vue3 triển khai khả năng tương thích ghi và tải lên trang web H5 (mp3, wav) cho nội dung trên. Android, iOS và PC, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .