鞍山一般建一个网站需要多少钱,云阳网站建设,怎么可以做网站的网站,即商通网站建设推广H5支持页面中调用录音机进行录音
H5加入录音组件#xff0c;录音后可以进行播放#xff0c;并形成录音文件#xff0c;其采样率固化48000#xff0c;传言是google浏览器的BUG#xff0c;它无法改动采样率。 大BUG#xff0c;目前主流的支持16000hz的采样率。
录音组件 …H5支持页面中调用录音机进行录音
H5加入录音组件录音后可以进行播放并形成录音文件其采样率固化48000传言是google浏览器的BUG它无法改动采样率。 大BUG目前主流的支持16000hz的采样率。
录音组件
D:\workspace\vue\vzx-admin\src\components\Recorder\recorder.vue
templatedivbutton clickstartRecording :disabledisRecording开始录音/buttonnbsp;button clickstopRecording :disabled!isRecording停止录音/buttonnbsp;el-checkbox sizesmall checkedisplay是否播放/el-checkbox/div
/templatescript
import axios from axios;export default {data() {return {mediaRecorder: null,isRecording: false,chunks: [],isplay: true};},methods: {async startRecording() {const stream await navigator.mediaDevices.getUserMedia({ audio: true });let track stream.getAudioTracks()[0];//获取音频文件的信息console.log(track.getCapabilities());this.mediaRecorder new MediaRecorder(stream);this.chunks [];this.mediaRecorder.ondataavailable (event) {if (event.data.size 0) {this.chunks.push(event.data);}};this.mediaRecorder.onstop () {const audioBlob new Blob(this.chunks, { type: audio/wav });const audioUrl URL.createObjectURL(audioBlob);// 在这里你可以处理录制完成的音频比如播放或上传到服务器// 创建FormData对象let formData new FormData();// 第一个参数是后台接收的文件参数名第二个参数是blob数据第三个参数是文件名formData.append(file, audioBlob, rd.wav);// 发送ajax请求axios.post(http://localhost:6070/basic/coursepic, formData, {headers: {Content-Type: multipart/form-data}}).then(response {// 处理响应数据console.log(response)}).catch(error {// 处理错误console.log(error)})//播放if(this.isplay){var audiodocument.createElement(audio);audio.controlstrue;document.body.appendChild(audio);audio.srcaudioUrl;audio.play(); //这样就能播放了audio.style.display none;//注意不用了时需要revokeObjectURL否则霸占内存setTimeout(function(){ URL.revokeObjectURL(audio.src) },5000);}};this.mediaRecorder.start();this.isRecording true;},stopRecording() {if (this.mediaRecorder this.isRecording) {this.mediaRecorder.stop();this.isRecording false;}},},
};
/script
测试页面
templateRecorder /
/templatescript setup
import Recorder from ../../components/Recorder/recorder.vue;/script
