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