基于百度tts-实现文字转语音,支持下载,在线预览

1.新建一个.html 文件,将下面的代码复制到文件内,保存。


DOCTYPE html>
<html>
<head>
    <title>title>
head>

<script src="https://cdn.jsdelivr.net/npm/vue@2">script>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<style type="text/css">
    p{
        background-color: #96b97db0;
        padding: 6px;
        font-size: 14px;
        color: #f5fff4;
    }
    #text{
        background-color: #e3e3e3;
        border: 0;
        width:99%;
        height: 100px;
    }
    button{
        background-color: #d4d3d3;
        color: white;
        margin: 5px;
    }
    #spd{
        width: 50px;
    }
    .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
style>

<body>
<div id="app" >
<el-card class="box-card">
    <div slot="header" class="clearfix">
        <span style="font-weight:bold;">文字转语音-百度ttsspan>
        <el-button type="primary" icon="el-icon-headset" style="float: right;margin:3px;" @click="previewClick()">预览el-button>
    div>
      <div>
        <span>语言:span>
        <el-radio-group v-model="param.lan" @change="previewClick">
        <el-radio v-for="item in language" :label="item.code" :key="item.code" >{{item.name}}el-radio>
       el-radio-group>
      div>
      <div>
        <span>后缀:span>
       <el-radio-group v-model="param.aue" @change="previewClick">
        <el-radio v-for="item in aue" :label="item.code" :key="item.code" >{{item.name}}el-radio>
       el-radio-group>
     div>
        <audio style="width:100%;" id="tts_autio_id" autoplay="autoplay" controls="controls">
           <source id="tts_source_id" :src="url">
           <embed id="tts_embed_id" height="0" width="0" src="">
        audio>
    <el-tabs v-model="tabs">
        <el-tab-pane label="基础音库" name="-1">
            <el-button type="success"  v-for="per in pers1" @click="param.per=per.code" style="margin: 3px;">{{ per.name }}el-tag>
        el-tab-pane>
        <el-tab-pane label="精品音库" name="1">
            <el-button type="success" v-for="per in pers2" @click="param.per=per.code" style="margin: 3px;">{{ per.name }}
            el-button>
        el-tab-pane>
  el-tabs>
    <el-input v-model="param.tex" type="textarea"
            :rows="10" placeholder="请输入需要转换的文字">el-input>
    <div class="block">
        <span class="demonstration">语速:span>
        <el-slider v-model="param.spd" :min="0" :max="15" >el-slider>
    div>
    <div class="block">
        <span class="demonstration">音调:span>
        <el-slider v-model="param.pit" :min="0" :max="15">el-slider>
    div>
    <div class="block">
        <span class="demonstration">音量:span>
        <el-slider v-model="param.vol" :min="0" :max="15">el-slider>
    div>

el-card>
div>

<script type="text/javascript">
    var app = new Vue({
          el: '#app',
          data: {
                message: 'Hello Vue!',
                tabs: '-1',
                url: "http://tts.baidu.com/text2audio?",
                param:{
                        cuid: "baike",
                        lan: "ZH",
                        ctp:1,
                        pdt:301,
                        per: 0,
                        spd: 5,
                        pit: 5,
                        vol: 5,
                        tex: "林荒大吼出声,即便十年挣扎,他也从未感到过如此无助。自己的身体一点点陷入岁月之门,却眼睁睁的看着君倾城一手持剑,雪白的身影决然凄厉。就这样孤身一人,于漫天风雪中,对阵数千武者",
                        aue: 3
                    },

                pers1: [
                {"code":0,"name":"标准女音"},
                {"code":1,"name":"标准男音"},
                {"code":3,"name":"斯文男音"},
                {"code":4,"name":"小萌萌"},
                {"code":5,"name":"知性女音"}

                ],

               pers2: [
                {"code":5,"name":"度小娇"},
                {"code":103,"name":"度米朵"},
                {"code":106,"name":"度博文"},

                ],

                aue: [{"code":3,"name":"mp3"},

                    {"code":6,"name":"wav"},
                   ],
                language: [{"code":"ZH","name":"普通话"},

                      ]
              },
             methods:{
                previewClick(){
                    this.url="http://tts.baidu.com/text2audio?";
                    for(var key in this.param){
                        this.url += key;
                        this.url += "=";
                        this.url += this.param[key];
                        this.url += "&";
                    }
                    this.url = this.url.substring(0,this.url.length - 1);
                    document.getElementById('tts_autio_id').setAttribute("src", this.url);
                    document.getElementById('tts_autio_id').play()
                }
             }
        })
script>
body>
html>

2、 将该文件鼠标拖到浏览器中,即可打开。

3、使用说明

基于百度tts-实现文字转语音,支持下载,在线预览

Original: https://blog.csdn.net/weixin_43865196/article/details/122173434
Author: 小何开发
Title: 基于百度tts-实现文字转语音,支持下载,在线预览

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/498232/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球