文字播放
<template>
<div>
<ul>
<li v-for='(item,index) in list ' :key="index">{{item.title}}
<span @click='bofang(index)'></span>
</li>
</ul>
<div id="wrapp">
</div>
</div>
</template>
<script>
export default {
mounted() {},
data() {
return {
ttsText: '1',
list: [{
title: '第一个'
}, {
title: '第二个'
}, {
title: '第三个'
}, {
title: '第四个'
}, ]
};
},
methods: {
bofang(index) {
this.ttsText = this.list[index].title;
var ttsDiv = document.getElementById('wrapp');
// 这样就可实现播放内容的替换了
var au1 = '<audio id="wrapp_aud" autoplay="autoplay">';
var sss =
'<source src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=' +
this.ttsText +
'" type="audio/mpeg">';
var au2 = '</audio>';
ttsDiv.innerHTML = au1 + sss + au2;
var ttsAudio = document.getElementById('wrapp_aud');
ttsAudio.play();
}
}
};
</script>
<style lang="scss">
input {
border: 1px solid black;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: #1469B8;
}
li {
height: 40px;
display: flex;
align-items: center;
border: 1px solid red;
}
</style>
