From 46eafc7f8d9a5cd1a4dd8497dac64d50ec1db57f Mon Sep 17 00:00:00 2001 From: AkagiYui Date: Fri, 30 Aug 2024 18:19:23 +0800 Subject: [PATCH] refactor: play audio with web audio api --- env.d.ts | 3 ++- src/assets/qrcode.mp3 | Bin 3037 -> 0 bytes src/assets/qrcode.webm | Bin 0 -> 1549 bytes src/pages/index/scanner.vue | 26 +++++++++++++++++++++++--- 4 files changed, 25 insertions(+), 4 deletions(-) delete mode 100644 src/assets/qrcode.mp3 create mode 100644 src/assets/qrcode.webm diff --git a/env.d.ts b/env.d.ts index c334768..2d617ec 100644 --- a/env.d.ts +++ b/env.d.ts @@ -6,7 +6,8 @@ export {} declare global { export interface Window { - $message: MessageApiInjection + webkitAudioContext: typeof AudioContext + $message: MessageApiInjection $dialog: DialogApiInjection $loadingbar: LoadingBarInst $notify: NotificationApiInjection diff --git a/src/assets/qrcode.mp3 b/src/assets/qrcode.mp3 deleted file mode 100644 index 8e63ce62e5562201a832ab5e8e3b46b1fc84bedd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3037 zcmc&$2~<;88onVBLV!Y$eFCIm%LrnGV6jCu!zy4{!crCiLjVC~SFD&&PFInYC-2_8oB#X1|Nig( z&xvM=0b=NQd3xHxS9t)?E+NS*Gjn5;y~evK6y)yDUyz8tW%i$kzL7`6;X7~`fCoUP z5om~EiNFB?9f2Q$5ClgMBp^5?Mka!41kDI~5PXZ^DS{snKw^lMz?u)kn$4)<$s6cO zSpPhfX$;bnoqhB3n=2$zU;=p|0BjBbSXeYXM8Tg8cmWXrs}2A#5D9Rk*3Yq_YVFMG zViy}%J5zC182<|(Q6ZD`8y*X^{uUkv1M*pa$M{>dKpvYK`R@P@2gT+>jLjHZL;t=p zii3jO71?!@n=#%&2H>ErvbY=e?;ZnGO08)%vFl$H5PerI0Ks77+FqNuxNeiYw)*g4 zB90s>?8~Mtf1j7_-dH3qgon98OW;ffK=w@`B%<^y-xfj+v)l*ep%mLKDF{r7SX_C0 zNLiqBsZ68M_n5=gnTytCK;FV zv#~il&1jnSA;(6h>vuV{Ggof-;vE}IO-h=iLd85kAUyE@HhF$s*!u5rGU^y|H?I^J z>+K|{sdJvTL@)mMAhN-zW9j>4eAQ@8-oUfb+AkjVypCo+n13;m6>mc3nwL^4(qSpZ zgRf=;O=6yDc_A6}lZkJ6s3;?N1@V^$NIvY#Ril#gm!g-gWg=G@9j{<>3+0YIp9Ln= zV~FhlPgopxOrXdKOByz=t5Er8rD=_IwH%9AdM84fLo3L*!G-7HI&vsd$~ zZ6x_W{LCWwag4{>ZfcMX%tM>b7486i@Q!TejgH>R)64&R?P;}UhOpwLp!1T9D|{q! z08l6tyMS(pZmf?#Ng8D@3C8OJX&nGJUeise{^#pcu7@t>n9Rf*X~q>N86$pj5kFga z3K2h)U-G7>?Zm41fM`P~{XrD0wQN52!ohzKuvCm-IlJYVDn7mt4m1Zw{ zBq|H1WNr`(($Yy+esLN6K=wf$zb=>ZPGslhZa~*e-{=>2wsHTNJQ_3$R%&~R3-+4XniaUOn zzx45eJ_TreL=*!av}}kteML_a=(|VlZ~b{q_Gk%7hNCoc#u1K_)6wd+8*5B5_=;f zbp`@vxYpx>X@h??Q*jY7kItHOrlo{7KW(~DH_Kf+u|7GO%*=AM@5K+%^zuCvYP~1U z$DXd&7|~XYI6lCV5M>h2@%C}bu{Ij!NFMaQ@w)vgQnKj{Z+mj4Y?=~-yT6(sk=5?fuBcV3%uv)U+SZgyF3L}f zw=GK3(wO}~&!Au_Co0`S$I;g7NYL;~U5OQRt8%ZZT!S{;Ynclu{9{5OdtWfn2DpP$ z07&K~#LeX`gE$U38cv*#o6trirhd82=s|A*^-MX=wA=ZU!Mm-+ zsSZ;>7Tw^Ix5`w0{L@(#>iYqf0j?^T&bw6am#PaF==;ZeSn`86px4&*IMsbF#UDM_ zP#_xNtcalR>Yb$4k#&ptTN4Im{@-{~*5!HCMs9AyJtYeF)oONK;T?5OPsC{0a>{JG z^6heR7urW$S~VeM^z%=3)AYkb#001{kxe=xANDAT(&eaH}=$tSCJpHq@{1H5mh{Ak@ z8fqjArObM^s86X!U;qkJlVDnTAtY-z(53w!{fLkM*-T-Iw3BtP1`buJ4xjlbpoSvB On&8HRym$T)Iruk>B%VD0 diff --git a/src/assets/qrcode.webm b/src/assets/qrcode.webm new file mode 100644 index 0000000000000000000000000000000000000000..9926b3b46dde5885f7a61434fb0e9ad8abb69fe1 GIT binary patch literal 1549 zcmb1gy}x+AQ(GgW({~{L)X3uWxsk)EsiizMDc7kT$Zc(8k_c`{XJh~Y*1LkfvrBgQ z?(Pm=-6HC_GA(#b<3b2eEM#3akax{@cMnibDCBT@@R}w@2MAXtcsEe8iS_s!h&c?A zVB=^(fLygf>-xrKekTXth8~~9vNSUTJ!3sX1A}l!6s}8WheP54up2;*f4UCpwwUXU zjKxPgdKO>)I8kBB%sGt=N?YeNm*%B(G%~ccImY`3ga(JLYEIT$5VpI8<;WI>=0>K6 z6X!QFZtZY*UH~>PDWy>$dC_G5g3@A-)Wj4BD;ef5g`CW!e4th7Cl>8+|{%Jk5yzc}20jX!Wk@ zL=o=Y?Kcw3tX^^K7w(I`*XQ>p+12mJ(`)zT7nd4Wx9Ypa$pr1?Os#m)=fQXVo9c^y zxqq}5J4|k55N)Vv`g>#bg;oC+uueG~dnNebqf{Tin0+_mcd#_=J@ePYT*YzGiQK>I zH)VWLp6{+;wda5yL$o5PHk;s;x-Ot^o zhTF_dS^KK#RoL}4KE`zy!Y=vmdNS|C`p4Hctp9v@Q%Hr-duPROLB4mnPa6BKQ=O9@ zF{j|Z;kU&Oz&O?fy6V7v;Y{~+(=1aQ!?x&6z1zNz*{SVVuZz{2s-DEZ*VWyByvtd7 z#nSH+yRrNgp<6))Jm-a$Y~R}$b7kL@r9Paydsb{%9DMfq5s_IjC6R(x_eGVaGcOF` zwYXl~&h?<_sM1d6)?4$q)|z_mPkm(C;D2=glgHEDj(W^_(_nVQMDI<($w?859U2=M zY=KUhTl(2LH1w@`+n!rXj*1z+IOuTHWL?ag-Ajs(cf?3HX|tuVulj%Kc=o%RAI^NQ zyOXwEex!X!GueI91P;fJ`{y^_KE*Zv0c)H?CI56c<=efN`rrI=-%z_g&z(PAy5Q9p z9&@{vkXOoCaca|UGH6K#f0(;x9qazgjlA(zXBRtkH8KPO-C)8HS#6|cB_RIYvZ96g z%lQITww6tszunX31lj;rYEH|#BJ)UwJQokjLqJ(>^qat%y&ue`Nvf{Yk1g}ZEm0Qi>uQi@6ofk?@B)c zPM+fE(Yov&5Oza;Hs^#>OJ@8!wfI{jLux}sd+N5`nbTTjGUsMwETvSO`RP*Z!42N5tuCK#8T4;3X`Af(vf`4&)SZjpH8NB-R46=& zm0tccPj5?w?)2xuXJ*gOT)nU3_VfEM6KAsjFX-O0^uBN~BA{r~Bid3}~` z-KvD|rRxrPwd%MF+*+t+f9SIcf5&vI>`cQooqM~(oDS<+t~z1%Zszas*WTwI7DWcF zQ)ZrhYQf`$w;CCG87ib)#GXGp<|!ImZLxouszTn6=$9QT*M#|oHv#36z;emxM@{T*SGEY_3ryi7qu{|2bqHk { // 播放提示音 - value && beepRef.value?.play() + value && playAudio() }) const videoRef = ref() -const beepRef = ref() let stream: MediaStream | null = null let animationFrameId: number | null = null @@ -207,10 +206,31 @@ async function requestPermission() { errorMessage.value = "请求摄像头权限失败,请检查权限设置。" } } + +const audioContext = new (window.AudioContext || window.webkitAudioContext)() +let audioContent: AudioBuffer | null +onMounted(() => { + // 预加载音频 + fetch(useAssetUrl("qrcode.webm")) + .then((response) => response.arrayBuffer()) + .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer)) + .then((audioBuffer) => { + audioContent = audioBuffer + }) + .catch((e) => console.error("Error with decoding audio data", e)) +}) + +function playAudio() { + if (audioContent) { + const source = audioContext.createBufferSource() + source.buffer = audioContent + source.connect(audioContext.destination) + source.start() + } +}