文本转换成语音并播放

最新推荐文章于 2023-05-24 11:27:18 发布

置顶迷茫的程序员

最新推荐文章于 2023-05-24 11:27:18 发布

阅读量174

点赞数

分类专栏：文本转语音文章标签： html linq 前端

本文链接：https://blog.csdn.net/qq_42041144/article/details/124929451

版权

文本转语音专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>在线文字转语音合成工具</title>
       <script type="text/javascript" src="vue.js"></script>
   </head>
   <body>
       <div id="app" v-cloak>
           <div style="text-align:center;margin:0 auto;letter-spacing:5px;">
               <h1>在线文字转语音合成工具</h1>
               <textarea style="font-size:16px;font-weight:bold;" type="text" cols="100" rows="20"
                   id="ttsText">请输入要转换语音的文字</textarea><br /><br />
               <input style="font-size:28px;font-weight:bold;cursor:pointer;" id="tts_btn" name="tts_btn" type="Button"
                   value="　生成语音　" @click="create" />
               <input style="font-size:28px;font-weight:bold;cursor:pointer;" id="tts_btn" name="tts_btn" type="Button"
                   value="　播　放　" @click="start" />　
               <input style="font-size:28px;font-weight:bold;cursor:pointer;" id="tts_btn" name="tts_btn" type="Button"
                   value="　暂停　" @click="stop" />
               <input style="font-size:28px;font-weight:bold;cursor:pointer;" id="tts_btn" name="tts_btn" type="Button"
                   value="　下　载　" @click="downFile" />　

               <div id="bdtts_div_id">
                   <audio controls id="tts_autio_id">
                       <source id="tts_source_id"
                           src="https://tts.baidu.com/text2audio.mp3?tex=1&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=3&amp&spd=4"
                           type="audio/mpeg">
                       <embed id="tts_embed_id" height="0" width="0" src="">
                   </audio>
               </div>

           </div>
       </div>
   </body>
   <script type="text/javascript">
   var app = new Vue({
   el: '#app',
   data: {
   ttsDiv: null,
   ttsAudio: null,
   },
   created: function () {
               this.ttsDiv = document.getElementById('bdtts_div_id');
               this.ttsAudio = document.getElementById('tts_autio_id');
               var ttsText = document.getElementById('ttsText').value;
               this.ttsDiv.removeChild(this.ttsAudio);
               var audio = '<audio controls id="tts_autio_id">'+
                   '<source id="tts_source_id" src="https://tts.baidu.com/text2audio.mp3?tex=' + ttsText +
                   '&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=3&amp&spd=4" type="audio/mpeg">'+
                   '<embed id="tts_embed_id" height="0" width="0" src="">'+
                   '</audio>';
               this.ttsDiv.innerHTML = audio;
   },
   mounted() {

   },
   methods: {
               /**
               * 生成语音
               */
               create(){
                   this.ttsDiv = document.getElementById('bdtts_div_id');
                   this.ttsAudio = document.getElementById('tts_autio_id');
                   var ttsText = document.getElementById('ttsText').value;
                   this.ttsDiv.removeChild(this.ttsAudio);
                   var audio = '<audio controls id="tts_autio_id">'+
                       '<source id="tts_source_id" src="https://tts.baidu.com/text2audio.mp3?tex=' + ttsText +
                       '&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=3&amp&spd=4" type="audio/mpeg">'+
                       '<embed id="tts_embed_id" height="0" width="0" src="">'+
                       '</audio>';
                   this.ttsDiv.innerHTML = audio;
               },
               /**
               * 播放语音文件
               */
   start(){
                   this.ttsDiv = document.getElementById('bdtts_div_id');
                   this.ttsAudio = document.getElementById('tts_autio_id');
                   var ttsText = document.getElementById('ttsText').value;
                   this.ttsDiv.removeChild(this.ttsAudio);
                   var audio = '<audio controls id="tts_autio_id" autoplay="autoplay">'+
                       '<source id="tts_source_id" src="https://tts.baidu.com/text2audio.mp3?tex=' + ttsText +
                       '&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=3&amp&spd=4" type="audio/mpeg">'+
                       '<embed id="tts_embed_id" height="0" width="0" src="">'+
                       '</audio>';
                   this.ttsDiv.innerHTML = audio;
                   this.ttsAudio = document.getElementById('tts_autio_id');
                   this.ttsAudio.play();
   },
               /**
               * 暂停播放
               */
   stop(){
   this.ttsAudio.pause();
   },
               /**
               * 下载语音文件
               */
   downFile(){
   this.ttsDiv = document.getElementById('bdtts_div_id');
   var ttsText = document.getElementById('ttsText').value;
   var a = document.createElement('a');
   a.href =
       'https://tts.baidu.com/text2audio.mp3?tex=' + ttsText +
       '&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=3&amp&spd=4'
   a.download = "text2audio.mp3";
   document.body.appendChild(a);
   a.click();
   },
   },
   });
   </script>
</html>

迷茫的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本转换成语音并播放

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>在线文字转语音合成工具</title> <script type="text/javascript" src="vue.js"></script> </head> <body>...
复制链接

扫一扫