vue 实现文字转语音

本文介绍了如何使用JavaScript实现网页上的语音播放功能,通过SpeechSynthesis API控制语音合成,并结合Vue.js的点击事件,触发播放语音并弹出确认对话框,处理用户确认后的业务逻辑。

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

<template>
     <button @click="playVoice">播放语音</button>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
     data() {
     return {};
     },
     methods: {
     playTips() {

        var tips = '开始播放语音,请注意';

        this.handleSpeak(tips); //播放语音内容

          this.$confirm(tips, '提示', {

          dangerouslyUseHTMLString:true,

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

                this.handleStop() // 停止,不用入参

                。。。。。。点击确定时,业务处理逻辑

             }

        })
     },
     // 语音播报的函数
     handleSpeak(text) {
     msg.text = text; 
     msg.lang = "zh-CN"; // 使用的语言:中文
     msg.volume = 1; // 声音音量:1
     msg.rate = 1; // 语速:1
     msg.pitch = 1; // 音高:1
     synth.speak(msg); // 播放
     },
     // 语音停止
     handleStop(e) {
     msg.text = e;
     msg.lang = "zh-CN";
     synth.cancel(msg);
     }
     }
};
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值