uni-app实现自定义操作音效

最新推荐文章于 2025-03-20 14:41:51 发布

海波咯

最新推荐文章于 2025-03-20 14:41:51 发布

阅读量8k

点赞数 4

分类专栏： uni-app 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/weixin_42938670/article/details/108020134

版权

这篇博客介绍了如何在uni-app中实现自定义操作音效。首先从免费音效网站下载适合的音效文件，并将其上传至腾讯云COS服务器。接着，在uni-app中利用'createinneraudiocontext' API播放音效，通过将音频管理封装到Utils.js的music对象中，提高了代码的复用性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

一个好的软件，页面或者是一些操作之间的衔接必须要流畅，出了受到手机自身硬件和网速的影响之外，还可以通过制作过度动画来显得很流畅，此外也可以使用一些自定义音效来提升用户的体验。我个人特别比较有感觉的就是苹果的闹钟，移动的时候会发出“哒哒哒哒哒哒...."特别清脆的声响，同时手机也还在振动，那一刻这个闹钟就把我魂给吸走了。

第一步下载需要的音效

在 http://www.aigei.com/sound/class/click/ 这个网站上搜索需要的音效，免费的，真的爱了爱了，根据你自己的需求来选，比如我需要的是一个点击音效，那这个音效肯定不能太长，不得大于一秒钟。
在这里插入图片描述
下载好之后，要把这个音效放到公网上，可以放到自己的服务器上，我这里就放到了腾讯云的cos服务器上，我在里面的设置的桶是公开的，所以你们可以直接复制粘贴我下面的链接到浏览器上，就可以获取了。