vue-sound-wave
Version:
3 lines (2 loc) • 1.91 kB
JavaScript
import{ref as e,watch as r,openBlock as a,createElementBlock as o,createCommentVNode as t,normalizeStyle as i,createElementVNode as l,nextTick as n}from"vue";import s from"wavesurfer.js";import d from"wavesurfer.js/dist/plugins/record.esm.js";const c=[l("div",{id:"waveform"},null,-1)];var u={props:{isRecord:{type:Boolean,required:!0},waveOptions:{type:Object,default:()=>({waveColor:"#4CAF50",progressColor:"#52C41A",height:20,barWidth:2,barGap:3,barRadius:2,barMinHeight:1,normalize:!0,interact:!1,fillParent:!0,pixelRatio:1,minPxPerSec:50,cursorWidth:0,responsive:!0,partialRender:!0,removeMediaControl:!0,hideScrollbar:!0})},overlayStyle:{type:Object,default:()=>({background:"rgba(0, 0, 0, 0.15)",width:"150px",height:"50px",minWidth:"150px",padding:"15px 10px",boxSizing:"border-box"})}},setup(l,{expose:u}){const v=l,p=e(null),g=e(null),m=async()=>{p.value||await(async()=>{await n();try{p.value=s.create({container:"#waveform",...v.waveOptions}),await navigator.mediaDevices.getUserMedia({audio:!0}),g.value=p.value.registerPlugin(d.create({scrollingWaveform:!0,renderRecordedAudio:!1,mediaRecorderOptions:{audioBitsPerSecond:128e3}})),g.value.on("record-start",(()=>{console.log("录音开始")})),g.value.on("record-end",(()=>{console.log("录音结束")}))}catch(e){throw console.error("创建 WaveSurfer 实例失败:",e),e}})()};r((()=>v.isRecord),(async e=>{try{await m(),e?await g.value.startRecording():await g.value.stopRecording()}catch(e){console.error("录音操作失败:",e)}}),{immediate:!0});return u({togglePlay:async()=>{try{await m()}catch(e){console.error("麦克风访问错误:",e),alert("请允许访问麦克风")}}}),(e,r)=>(a(),o("div",null,[t(" 悬浮音波层 "),l.isRecord?(a(),o("div",{key:0,class:"floating-wave",style:i(l.overlayStyle)},c,4)):t("v-if",!0)]))},__file:"src/components/SoundWave/SoundWave.vue"};export{u as default};
//# sourceMappingURL=index.js.map