vue 实现文字语音播放

最新推荐文章于 2025-03-05 15:16:57 发布

tzjz_szq

最新推荐文章于 2025-03-05 15:16:57 发布

阅读量4.6k

点赞数 1

文章标签：前端

原文链接：www.baidu .com

版权

本文介绍如何利用Vue框架结合百度的文字转语音（TTS）API，实现网页上的文字实时转换为语音播放功能。文章详细展示了代码实现过程，包括HTML模板设置、JavaScript调用接口的方法及响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div>
      <input type="text" id="ttsText">
      <input type="button" id="tts_btn" @click="doTTS" value="播放">
      <input type="button" id="zt_btn" @click="doZT" value="暂停">
    </div>
    <div id="wrapp">

    </div>
  </div>
</template>
<script>
  export default {
    mounted() {},
    data() {
      return {
        textVal: '911',
        ss:''
      };
    },
    methods: {
      doTTS() {
        var ttsDiv = document.getElementById('wrapp');
        var ttsText = document.getElementById('ttsText').value;
        // 这样就可实现播放内容的替换了
        var a= '<audio id="wrapp_aud" autoplay="autoplay">';
        var b= '<source src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text='+ttsText+'" type="audio/mpeg">';
        var c= '</audio>';
        ttsDiv.innerHTML = a + b + c;
        var ttsAudio = document.getElementById('wrapp_aud');
        ttsAudio.play();
      },
      doZT() {
        var ttsAudio = document.getElementById('wrapp_aud');
        ttsAudio.pause();
      }
    }
  };
</script>

通过JS调用接口

<script src="http://code.responsivevoice.org/responsivevoice.js"></script>

responsiveVoice.speak(STRING TEXT, [STRING VOICE], [OBJECT PARAMETERS]);
//text：就是要朗读成语音的文字，比如：responsiveVoice.speak("hello world");
//voice：是选择用什么语音阅读，默认是英文阅读，如果要用中文阅读，就设置成“Chinese Female”，比如：responsiveVoice.speak("hello world","Chinese Female");
//parameters:这个是阅读的速度，比如：responsiveVoice.speak("hello world", "UK English Male", {rate: 1.5});

responsiveVoice.cancel();//取消朗读

responsiveVoice.pause();//暂停阅读

responsiveVoice.resume();//复位到开启