js中的audio声音播放及浏览器播放报错处理

在web端中常常会用到播放声音用来提示消息、告警等等。

在这有两种实现方式：

1. 采用audio调取声音播放url
2. 采用html5新增的API(SpeechSynthesisUtterance：用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等）

1.采用audio调取声音播放url（canplaythrough事件为音频加载完成且无卡顿和缓冲时触发）

        var url =  /* 音频播放地址 */
        var audio = new Audio();
        audio.src = url;
        audio.addEventListener("canplaythrough", event => {
            /* 音频可以播放；如果权限允许则播放 */
            audio.play();
        });

2 .采用SpeechSynthesisUtterance

let utterThis = new SpeechSynthesisUtterance('干饭啦！');
speechSynthesis.speak(utterThis);

此外还有其他的配置项

• speech.lang 获取并设置话语的语言（en-US、zh-CN）
• speech.pitch 获取并设置话语的音调 (值越大越尖锐，range:0-2, default:1, float)
• speech.rate 获取并设置说话的速度 (值越大语速越快, range:0.1-10, default:1, float)
• speech.text 获取并设置说话时的文本
• speech.voice 获取并设置说话的声音
• speech.volume 获取并设置说话的音量 (range: 0-1, default:1, float)
• speech.onboundary
• speech.onend 播放结束的回调
• speech.onerror 播放出现错误的回调
• speech.onmark 当读到标记文本时的回调
• speech.onpause 播放暂停
• speech.onresume 播放重启
• speech.onstart 播放开始的回调

案例：

function speak (msg) {
	var utterThis = new SpeechSynthesisUtterance()
	utterThis.text = msg
	utterThis.pitch = 1 // 获取并设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)
	utterThis.rate = 0.9 // 获取并设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)
	utterThis.volume = 100 // 获取并设置说话的音量
	utterThis.lang = 'zh-CN' // 设置播放语言
	// 语音播报结束时的回调
    utterThis.onend = (event) => {
       // 语音播报完需要清空展示内容
    }
}
speak('干饭啦！')

 但是在浏览器常常会报错

DOMException: play() failed because the user didn't interact with the document first。意思就是调用audio.play()方法之前，用户必须先和页面有交互，否则调用失败。

这里的交互是指必须用户与页面发生了事件，单击 onclick，双击 ondblclick，按下 onmousedown，松开 onmouseup，右击 oncontextmenu ，按下 onkeydown，松开 onkeyup 等

1.可以在用户进页面上展示一个欢迎框，点确定调取click事件之后就可以播放了

2.就是当有声音进来采用try....catch方法弹出框提示用户开启语音播放

        var url = "" // 播放地址;
        audio = new Audio();
		audio.src = url;
		audio.addEventListener("canplaythrough", event => {
			// 如果视频播放失败在这里弹出提示框
			/* 音频可以播放；如果权限允许则播放 */
			audio.play().then((res) => {
				console.log('视频播放成功')
			})
				.catch((error) => {
					layer.open({
						title: '提示',
						shade: 0.6, //遮罩透明度
						content: '由于您的浏览器设置，声音无法自动播放，请点击确认按钮授权播放。',
						btn: '确认',
						btnAlign: 'c', //按钮居中
						yes: function (index) {
							layer.close(index);
							audio.play()
						},
						cancel: function (index) {
							layer.close(index);
							audio.play()
						},
					});
				})
		});

内容如有错误，欢迎大家在评论区指出，一起学习，一起成长，谢谢各位的浏览。