<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>