H5，js前端实现点击图标播放音频，js动态修改音频播放链接

前言：最近有个小需求，没用过前端音频播放，我的知识储备捉襟见肘，没有办法只能疯狂百度，发现有用的信息也只有寥寥几篇，但都多少有点问题，整合起来，终于是可用了。做个备份，顺道也分享给同道中人。希望能够帮到阅读至此的各位，如果没能帮助你，很遗憾浪费了你的时间。

功能：我的功能需求是做一个汉字单字朗读，也就是页面上放置一个小喇叭图标，点击这个小喇叭，就朗读当前汉字。见下图：

 尝试了<audio>标签，发现也有诸多问题不好实现，因为我的需求是想用自己的小喇叭图片做点击，所以还不能用html原生的播放样式显示，然后我还需要切换生字的时候同时要更换音频链接，这里就遇到了一些问题。最后采用了纯js实现方案。直接来代码吧，方法只用了一个，每次点击的时候都调用一下就好了。下面看代码吧，

首先是布局，布局这里我加了临时的搜狗的多种发声模式和有道的选择，也方便大家调试，实现的页面如下图

        <div style="margin-right: 16px;margin-left:16px;align-self: end; text-align: end">
          <van-image :src="iconAudioPlaying" width="24px" style="margin-top: 8px" @click="playAudio(1,6)"/>
          <div style="display: flex;width: 95%;flex-wrap: wrap;">
            搜狗：
            <div v-for="item in 6" :key="item" style="color: #0088cc;margin-left: 4px" @click="playAudio(1,item)">
              发音{{ item }}
            </div>
          </div>
          <div style="display: flex;width: 95%;flex-wrap: wrap;">
            有道：
            <div v-for="item in 1" :key="item" style="color: #0088cc;margin-left: 4px" @click="playAudio(2,item)">
              发音{{ item }}
            </div>
          </div>
        </div>

 关键部分js：

    /**
     * 点击小喇叭播放
     * @param audioSource 音频来源，这里我找到两个来源，1是搜狗的，搜狗还有6种人声发音，通过get链接来获取音频，
     *      通过text来设置需要朗读的文本，通过speaker设置人声模式，通过speed设置朗读速度
     * @param type 这里的type参数是用来设置人声模式的，搜狗从1-6一共六种发声模式，有道目前没有
     */
    playAudio(audioSource, type) {
      if (audioSource == 1) {
        this.url = 'https://fanyi.sogou.com/reventondc/synthesis?speed=1&lang=zh-CHS&from=translateweb&speaker=' + type + '&text='
      } else {
        this.url = 'https://tts.youdao.com/fanyivoice?le=cn&keyfrom=speaker-target&word='
      }
      //添加audio标签
      let f = document.createDocumentFragment()
      let audio = document.createElement("audio")
      //下面是设置音频控制样式的显示
      // audio.controls="controls"
      //是否自动播放，我的需求这里开启与否都一样，因为我点击按钮就是要让他播放，所以也就相当于自动播放
      // audio.autoplay="autoplay"
      let source = document.createElement("source")
      //这里的id一定要独一无二，不然切换生字的时候，会发生重叠，我这里在id后面加上了生字id
      source.id = "tts_source" + this.currentWord.id
      source.type = "audio/mpeg"
      source.src = this.url
      audio.appendChild(source)
      f.appendChild(audio)
      document.body.appendChild(f)
      //将我需要朗读的生字拼接到url后面
      source.src = this.url + this.currentWord.name
      audio.play()
    }

以上就是h5 js实现音频播放的全部内容了，补充说明一点，如果各位想对播放状态实现监听和控制，就还是用原生的监听事件的写法就可以，没啥难度这里不做细说了。

主要为了做记录备忘，如果恰好帮到你，那不胜荣幸，如果没有帮到你，那么很遗憾浪费了阁下时间。