vue将input框中文字转为语音播放

最新推荐文章于 2025-07-09 16:29:18 发布

weixin_30709061

最新推荐文章于 2025-07-09 16:29:18 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/chenchenhao/p/10400977.html

本文介绍了一种利用Vue框架实现文本转语音的方法，通过在HTML模板中嵌入音频元素和使用百度的TTS服务，可以将输入的文本转换为语音并实时播放。文章详细解释了如何设置音频元素的源链接，以及如何根据用户输入动态更新音频源，实现了文本内容的即时语音播放。

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

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

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