一个Vue铃声/提示音组件一个Vue铃声

背景/前言
【一个Vue铃声/提示音组件】之前的一个功能需求，需要在页面接收消息，一旦有了新消息之后，需要用铃声进行提醒。
因为没有找到类似的比较便捷的组件，所以就自己写了一个。然后想着能不能尝试下做成一个公共的组件，发布出去让其他开发者也用用？于是就试着写了一个项目（项目地址在最后），发布成了npm包。
目前这个组件已经发布到了npm上，欢迎大家试用。如果有好的建议，或者找到了更好的类似组件，欢迎指出和分享~
下面是使用文档：
组件的使用
安装

npm i easy-ring

加载 1）全局使用在vue-cli项目main.js上当作插件使用，即可直接在vue单文件组件使用

// main.js import EasyRing from 'easy-ring' Vue.use(EasyRing)

export default { ... }

2）import方式在vue单文件组件里引入

import EasyRing from 'easy-ring' export default { components: { EasyRing } ... }

组件生效

第一步. 开启铃声：将open参数设为true
第二步. 响铃：将ring参数设为true
第三步. 关铃：将ring参数设为false

PS：

开启铃声这一步，需要放到一个按钮下埋点进行触发（原因解释见下文 "关于open参数的解释"）。为了提升自己产品的使用体验，可以做到用户无感知，例如在登录时，用户点击“登录”按钮即可设置open参数为true
根据自己的需求自行决定何时响铃、何时关铃，将ring参数的更改放到对应逻辑下即可

组件参数

参数名	类型	默认值	说明
open	Boolean	false	开启铃声
ring	Boolean	false	是否响铃
src	String	默认铃声	铃声音频文件地址

使用默认音效若想使用默认音效，请在./main.js文件中引入默认音效

// main.js require('easy-ring/easy-ring-default.wav')

然后将这段代码合并到你的vue.config.js配置中:

configureWebpack: { module: { rules: [ { test: /easy-ring-default\.(wav)$/i, loader: 'file-loader', options: { name: 'media/[name].[ext]' }, }, ] } }

需要添加这个配置的原因是，vue-cli默认会对所有打包的静态资源加上hash版本号，这样easy-ring就无法获取到你目录下的默认音频文件的地址。
加上这一项file-loader的配置后，easy-ring的默认音频文件就不会带上hash版本号，easy-ring就能找到它。
关于open参数的解释因为当前多数浏览器不支持自动播放音频，需要用户自己主动触发播放音频才行。这一过程需要放在诸如click的交互事件里，因此我们需要一个按钮之类的东西来触发这一行为。
但是，你可以通过一些交互来设计这一行为，从而提升用户体验，甚至让用户对此无感知。例如：在登录时，在用户点击“登录”按钮时，在代码里设置open参数为true。
项目地址
github上的地址：easy-ring
访问不了github的可以试试这个镜像地址：fastgit镜像
一共有两个项目文件：