我们现在要处理一种情况，后台输出了一些html数据，但是希望将audio默认的标签，换成一个喇叭图片，类似百度翻译的发音图标。并能够播放音频
替换audio标签为img
因为数据从后端api获取，所以我们获取数据后，用正则先替换audio为img并记录音频地址
template模板
|
1 2 3 4 5 6 7 8 9 10 11 |
<div @click="htmlaudioplayen()" v-html="htmlchangedaudio(outhtml)" ></div> <audio style="display:none" ref="htmlaudio" controls controlsList="nodownload" @ended="htmlaudioenden" ></audio> |
script方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
methods: { //替换html内容 htmlchangedaudio(outhtml) { let reg = new RegExp( '<audio controls="controls" controlslist="nodownload" src="(.*?)"> </audio>', 'g' ) outhtml = outhtml.replace( reg, '<img style="width:25px;height:25px;vertical-align: middle;" src="' + require('@/' + '/assets/hornpause.jpg') + '" class="na_htmlplayaudio" data-audio-url="$1" />' ) return outhtml }, |
我们将audio的src音频地址，放到了img的data-audio-url中，以便后面点击事件可以获取到播放的资源。
你会看到我们的div下面还有一个隐藏的audio文件，后面我们会用到它。
事件绑定
如何让小喇叭图片可以播放呢？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//点击图标发声 htmlaudioplayen() { var event = window.event window.console.log(event) if ( event.target.tagName === 'IMG' && event.target.className === 'na_htmlplayaudio' ) { // 获取触发事件对象的属性 var htmlaudio= this.$refs.htmlaudio; htmlaudio.src = event.target.dataset.audioUrl htmlaudio.play() } }, |
其实很简单，我们获取到event，拿到此img之前绑定的data-audio-url，然后赋值给之前埋好的audio的src，让这个隐藏的audio播放即可。
img喇叭状态改变
现在喇叭在播放时不会动，我们希望播放时喇叭能够有播放动画。咋办，我们找来了一张gif图，在播放时切换它。并在播放停止后，切换回不同的小喇叭。
要实现这样的效果我们需要加一些代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//点击图标发声 htmlaudioplayen() { var event = window.event this.htmlcurrentaudio = event window.console.log(event) if ( event.target.tagName === 'IMG' && event.target.className === 'na_htmlplayaudio' ) { //切换图标 event.target.src = require('@/' + '/assets/horn.gif') // 获取触发事件对象的属性 var htmlaudio= this.$refs.htmlaudio; htmlaudio.src = event.target.dataset.audioUrl htmlaudio.play() } }, //播放停止还原图标 htmlaudioenden(){ this.htmlcurrentaudio.target.src = require('@/' + '/assets/hornpause.jpg') }, |
完活！还有优化空间，后续你们自己发挥把，拜拜