vue 实现铃声+语音播报

1. 安装howler.js 用以播放铃声

npm install howler

import { Howl } from "howler";mounted() {this.loadAudio();
}// 加载音频文件
loadAudio(){this.radio = new Howl({src: [`/mp3/radio.mp3`], // 提供多个格式以提高兼容性autoplay: false, // 是否自动播放，默认为falseloop: false, // 是否循环播放，默认为falsevolume: 1 // 音量大小，范围是0-1，默认为1});
}

注意，radio.mp3存放的路径是 public/mp3/radio.mp3
音频文件不可以用中文名，不然打包后部署会找不到。

2. 语音播报

initVoice(config) {window.speechSynthesis.cancel(); //播报前建议调用取消的函数，如有正在播报的话音，播报会任务被塞进入队列，只有等上一个语音结束才会执行下一个语音//获取语音包let listArr = window.speechSynthesis.getVoices();listArr = listArr.filter(item => item.lang.indexOf("zh-") > -1);if (listArr.length == 0) {console.error("没有可用的中文语音!");}//实例化播报内容let instance = new SpeechSynthesisUtterance();instance.text = config.text || "暂无播报内容"; // 文字内容instance.lang = config.lang || "zh-CN"; // 使用的语言:中文instance.volume = config.vol || 1; // 声音音量：1instance.rate = config.rate || 0.8; // 语速：1instance.pitch = 1; // 音高：1window.speechSynthesis.speak(instance); // 播放instance.addEventListener("end", () => {}); // 监听播报完成状态，播完可以做些其它处理
}

3. 铃声+语音播报

this.radio.play();
// 注意如果需要铃声播放完进行语音播报，需要给一个定时器
setTimeout(() => {this.initVoice({//text对象就是语音播报的文字内容text: "下面进行语音播报"});// 1.5s是上面铃声的长度
}, 1500);

3. 语音播报中注意点

// 语音需要停顿，用中文冒号
let text = "：：：机房地调：：："
// 连读时”地“，需要读成di(第四声)
// 找到改字的ASCII码,进行字符替换text = text.replace(/\u5730/g, "第");