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

<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();
        }
    }
};

 注意:

src中spd的值为1~10值越大语速越快

posted @ 2019-02-19 14:42  ①丶①۵  阅读(620)  评论(0编辑  收藏  举报