vue.js实现声音播放的方法：
功能展示 输入文字 点击播放 调用语音
直接上代码
<template>
<div>
<!-- 语音播放功能 -->
<div>
<input type="text" id="ttsText"><p style="color:transparent">来源gao!daima.com搞$代!码网</p>;
<input type="button" id="tts_btn" @click="myplay()" value="播放">
</div>
<div id="bdtts_div_id">
<audio id="tts_autio_id" autoplay="autoplay">
<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text= " type="audio/mpeg">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
</div>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
}
},
methods: {
myplay(){
var ttsDiv = document.getElementById('bdtts_div_id');
var ttsAudio = document.getElementById('tts_autio_id');
var ttsText = document.getElementById('ttsText').value;
ttsDiv.removeChild(ttsAudio);
var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text='+ttsText+'" type="audio/mpeg">';
var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
var au2 = '</audio>';
ttsDiv.innerHTML = au1 + sss + eee + au2;
ttsAudio = document.getElementById('tts_autio_id');
ttsAudio.play();
}
}
}
</script>
以上就是vue.js怎么实现声音播放的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue.js怎么实现声音播放
转载请注明原文链接：vue.js怎么实现声音播放
