前言:最近有个小需求,没用过前端音频播放,我的知识储备捉襟见肘,没有办法只能疯狂百度,发现有用的信息也只有寥寥几篇,但都多少有点问题,整合起来,终于是可用了。做个备份,顺道也分享给同道中人。希望能够帮到阅读至此的各位,如果没能帮助你,很遗憾浪费了你的时间。
功能:我的功能需求是做一个汉字单字朗读,也就是页面上放置一个小喇叭图标,点击这个小喇叭,就朗读当前汉字。见下图:
尝试了<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实现音频播放的全部内容了,补充说明一点,如果各位想对播放状态实现监听和控制,就还是用原生的监听事件的写法就可以,没啥难度这里不做细说了。
主要为了做记录备忘,如果恰好帮到你,那不胜荣幸,如果没有帮到你,那么很遗憾浪费了阁下时间。