快捷導(dǎo)航

vue調(diào)用語(yǔ)音播放的方法

更新時(shí)間：2019年09月27日 09:13:08 作者：小羽向前跑

這篇文章主要為大家詳細(xì)介紹了vue調(diào)用語(yǔ)音播放的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue調(diào)用語(yǔ)音播放的具體代碼，供大家參考，具體內(nèi)容如下

功能展示輸入文字點(diǎn)擊播放調(diào)用語(yǔ)音

直接上代碼

<template>
 <div>
 <!-- 語(yǔ)音播放功能 -->
 <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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能【推薦】
大家都經(jīng)常使用美團(tuán)app買(mǎi)電影票，很多朋友不知道她的功能是怎么實(shí)現(xiàn)的，作為我程序員一枚對(duì)它的算法很好奇，今天小編就把基于Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能分享到腳本之家平臺(tái)，感興趣的朋友一起看看吧
2018-08-08
vue3.x 使用jsplumb實(shí)現(xiàn)拖拽連線
這篇文章主要為大家詳細(xì)介紹了vue3.x 使用jsplumb實(shí)現(xiàn)拖拽連線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Pinia入門(mén)學(xué)習(xí)之實(shí)現(xiàn)簡(jiǎn)單的用戶狀態(tài)管理
Vue3雖然相對(duì)于Vue2很多東西都變了,但是核心的東西還是沒(méi)有變,比如說(shuō)狀態(tài)管理、路由等,再Vue3中尤大神推薦我們使用pinia來(lái)實(shí)現(xiàn)狀態(tài)管理,他也說(shuō)pinia就是Vuex的新版本,這篇文章主要給大家介紹了關(guān)于Pinia入門(mén)學(xué)習(xí)之實(shí)現(xiàn)簡(jiǎn)單的用戶狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下
2022-11-11
詳解Nuxt.js部署及踩過(guò)的坑
這篇文章主要介紹了詳解Nuxt.js部署及踩過(guò)的坑，Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署和靜態(tài)應(yīng)用部署。本文主要說(shuō)說(shuō)服務(wù)端渲染應(yīng)用部署，感興趣的小伙伴們可以參考一下
2018-08-08
vue ref如何獲取子組件屬性值
這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
下面小編就為大家分享一篇Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
VNode虛擬節(jié)點(diǎn)實(shí)例簡(jiǎn)析
這篇文章主要介紹了VNode虛擬節(jié)點(diǎn),結(jié)合實(shí)例形式分析了VNode虛擬節(jié)點(diǎn)的基本功能、原理與實(shí)現(xiàn)方法,需要的朋友可以參考下
2023-06-06
一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄
最近遇到了需求,覺(jué)著有必要給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
解決ant-design-vue中menu菜單無(wú)法默認(rèn)展開(kāi)的問(wèn)題
這篇文章主要介紹了解決ant-design-vue中menu菜單無(wú)法默認(rèn)展開(kāi)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
手把手教你Vue3如何封裝組件
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3如何封裝組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-02-02