码上掘金实现电子木鱼

前言

前几天在朋友圈看到“敲电子木鱼”的视频，敲一下木鱼就提示“功德 +1”，还带有敲击声和念经的声音，感觉挺有意思的。

心血来潮，捣鼓了一晚上，借助码上掘金实现了这个功能。

展示效果

素材

准备素材如下：

• 木鱼：网上找了一张木鱼的图片，用PS简单处理成黑白的图片。* 敲木鱼音频、念经音频：网上找了素材，简单剪辑了一下。素材存放在服务器上，方便码上掘金中引入。

代码块

首先，思考一下展示效果。我们点击木鱼，响起"咚"的一声，次数+1。同时，我们可以在木鱼的右上角添加"功德 +1"的文字闪现效果。

点击木鱼，我们需要做的事情有：

• 播放敲木鱼的声音
• 计数+1
• 添加交互效果（提示文字、木鱼动画等）

其中，计数很容易实现，就不赘述了。

在Vue3中，借助 audio 标签引入音频文件，调用.play()方法可以播放音频：

<audio controls ref="audio" class="aud"><source src="https://clemmensen.top/static/muyu.mp3" />
</audio><script setup> const audio = ref(null)
function playMuyu() {audio.value.play()
} </script> 

提示文字的实现是，当敲击木鱼时，给文字加上tipsActive的类名，该类名带有动画效果，文字会向上移动并消失。

@keyframes textMove {from {top: 20%;opacity: 1;}to {top: 18%;opacity: 0;}
} 

具体代码：

<div :class="['tips', { 'tips-active': tipsActive }]">{{tips}}
</div><script setup> const tips = ref('功德 +1')
function clickMuyu() {count.value ++ // 计数+1tipsActive.value = truesetTimeout(() => {tipsActive.value = false}, time.value)
} </script> 

相似的，给木鱼加上敲击效果，也就是点击会有缩放效果：

@keyframes muyuScale {0% {transform: scale(1);}50% {transform: scale(0.95);}100% {transform: scale(1);}
} 

拓展

开始界面

刚开始是直接显示一个木鱼图片，这里我们考虑添加一个自定义的开始界面，包括“Start”按钮和上方的诗词“睡到僧廊响木鱼，庄周蝴蝶两蘧蘧。”。在点击按钮后才进入木鱼图片，并开始播放背景音乐。

背景音乐

点击"Start"时，开始播放背景音乐。背景音乐的播放方法和上面提到的播放音频的方法一致，这里就不赘述了。

提供多种提示文字

右边加上了文字选择功能，可以选择功能、抗疫或Bug，对应的提示文字会跟着改变。

后记

一个简单的小项目，其中需要了解的地方是如何在vue3中使用audio标签引入音频文件。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享