如何在vue中调用语音播放

本篇文章给大家分享的是有关如何在vue中调用语音播放，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

<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是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

以上就是如何在vue中调用语音播放，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。