PC端Audio音频使用-订单提醒(解决不能自动播放)

1.本次使用audio的使用场景

 需求: 新订单,语音消息提醒.类似饿了么的语音提示.

2.其中遇到的坑.

本来以为做这个会很顺利的,但是由于chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。所以还是要通过一些特殊的处理.

     //  就这简单的两行代码就可以搞定...想的太简单了.
     //  如果在播放音频之前用户跟浏览器有交互效果的话这样也是足够的了
	 var audio = new Audio('static/overtime.mp3');
     audio.play();

在页面加载完毕的情况下，用户没有主动交互行为，使用js直接调用.play() 方法的话会出现以下的错误警示:

3.解决方案

• 通过Baidu查阅最后得到了几种解决方案.

1. 强制行让用户跟页面发生一次交互行为.也就是说可以在第一次播放音频前,弹出弹框进行确认播放.
2. 给audio标签添加静音属性.
3. 需要页面有音频播放器,才可以自动播放.(本次做法就是采用这个)

• 简单来说就是想要音频可以自动播放.就必须满足一下条件之一

1. 静音的音频
2. 有用户行为发生
3. 播放器没有被隐藏

前两种我觉得都太麻烦,也不太满足项目需求,所以就采用了第三种.话不多说下面就上代码:

     <template>
         <div>
         	
         	 <audio controls="controls" ref="neworder" class="audio-class">
	            <source src="static/new_order.mp3" type="audio/mp3">
	         </audio>
         </div>
     </template>
     <script>
     	export default {
		    data() {
		        return {
		        	
		        };
		    },
		    mounted(){
		    	 // 直接获取到audio来调用play方法就可以.
		    	 this.$refs.neworder.play();
		    },
     </script>
     <style lang="scss">
		.audio-class {
		    height: 0;  // * 重要
		}
	</style>
     

附: (音频合成)

1. 腾讯AI开发平台
2. BaiduAI开放平台

借鉴链接: https://blog.csdn.net/weixin_43999568/article/details/96983729