最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么实现声音播放

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js实现声音播放的方法:

    eea6a3d24beee1958b7a04507118500.png

    功能展示 输入文字 点击播放 调用语音

    直接上代码

    <template>
     <div>
     <!-- 语音播放功能 -->
     <div>
     <input type="text" id="ttsText">
     <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怎么实现声音播放的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么实现声音播放
    • 257会员总数(位)
    • 5903资源总数(个)
    • 14本周发布(个)
    • 6 今日发布(个)
    • 540稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情