JS 音效触发器 / 给动画添加音效

export default function audioPlayer(name, type, loop) {
    
    
  var pre = document.getElementById('audio-player-snowt')
  if (pre) {
    
    
    pre.parentNode.removeChild(pre)
  }
  if (!name || !type) return
  const body = document.body
  const au = document.createElement('audio')
  // 这里的路径使用相对路径 传入音频名字和格式就可以 assets下建一个audio存放所有音频
  au.src = '@/assets/audio/' + name + '.' + type
  // au.src = '/' + name + '.' + type
  au.autoplay = true
  au.id = 'audio-player-snowt'
  au.loop = loop
  body.appendChild(au)
}

说实话是很短时间内做的一个小工具，应该还有一些漏洞，还需要实际环境测试。

大体解释一下这个工具做了什么，
首先我们尝试获取id为audio-player-snowt的元素，如果存在，那就删掉
为什么呢？这是为了防止音效重叠，如果是循环音效，我们应当让它安静下来，再开启我们需要的音效
然后判断传入的参数是否完整，如果名字和类型有一个没传入或者没意义，那就结束执行，返回
然后获取body
然后创建新元素audio
设置audio的资源路径，自动播放，还有id和循环属性，有的音效我们希望它能循环播放，有的我们只希望播放一次
然后给body添加这个audio元素

关于路径的设计：
读者们拿到这个方法可以自己去操作，在项目中的话就可以使用约定的相对路由配置符号来设置路径，只要注意名字和类型拼接好就可以了。