JS实现网站声音提示,兼容IE与chrome,附谷歌chrome浏览器无法自动播放声音解决方法

function playSound(){
      var borswer = window.navigator.userAgent.toLowerCase();
      if(!!window.ActiveXObject || "ActiveXObject" in window){
        //IE内核浏览器
        var strEmbed = '<embed name="embedPlay" src="../sounds/ding.wav" autostart="true" hidden="true" loop="false"></embed>';
        if($("body").find("embed").length<=0){
        	$("body").append(strEmbed);
            }else{
            	$("body").find("embed").remove();
            	$("body").append(strEmbed);
            }
        var embed = document.embedPlay;
        //浏览器不支持 audion,则使用 embed 播放
        embed.volume = 100;
      }else{
        //非IE内核浏览器
        var strAudio = "<audio id='audioPlay' src='../sounds/ding.wav' hidden='true'>";
        if($("body").find("audio").length<=0){
        	$("body").append(strAudio);
        }
        var audio = document.getElementById( "audioPlay" );
        //浏览器支持 audion
        audio.play();
      }
    }

chrome限制自动播放声音解决办法:

1. 进入网站设置,声音设为允许。

 2. 写方法判断是否有自动播放权限,若没有则诱导用户对网站产生交互,以便正常播放声音。此方法每次进入网站都需产生交互才可正常播放声音。

function getSoundAccess(){
		var strAudio = "<audio id='audioPlay' src='./images/sounds/sound.mp3' hidden='true'>";
        if($("body").find("audio").length<=0){
        	$("body").append(strAudio);
        }
        var audio = document.getElementById( "audioPlay" );
        var promise = audio.play();
        if(promise !== undefined) {
          promise.then(function(){
	            //audio.play();
          }).catch(function(){
            //此处进行弹窗提醒,诱导用户对网站进行点击
          })
         }
	}

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
1. 谷歌浏览器实现自动播报语音 要实现自动播放语音,需要使用Web Speech API。这个API提供了两种语音合成的方式:SpeechSynthesis和SpeechRecognition。 SpeechSynthesis是用来合成语音的,而SpeechRecognition则用来识别用户的语音输入。在这里,我们只关注SpeechSynthesis。 下面是一个简单的例子,演示如何使用SpeechSynthesis API来合成语音: ```javascript var msg = new SpeechSynthesisUtterance(); msg.text = "Hello, world!"; // 要合成的文本 window.speechSynthesis.speak(msg); // 开始合成语音 ``` 2. Vue中解决Chrome浏览器自动播放音频 在Chrome浏览器中,为了避免页面加载时自动播放音频,浏览器会默认禁用自动播放。这对于一些需要自动播放音频的应用来说是一个问题。 为了解决这个问题,可以使用一个叫做“用户交互事件”的方法。当用户在页面上触发了某些事件(比如点击、滚动等),就可以认为用户已经与页面进行了交互,从而可以自动播放音频。 在Vue中,可以将自动播放音频的代码放在mounted()方法中,这样当组件挂载到页面上时,就会自动播放音频: ```javascript mounted() { var audio = new Audio('path/to/audio.mp3'); audio.play(); } ``` 3. MP3语音打包到线上 要将MP3语音打包到线上,可以使用webpack中的file-loader插件。这个插件会将指定的文件复制到输出目录,并生成一个对应的URL。 首先,在webpack.config.js中配置file-loader: ```javascript module.exports = { module: { rules: [ { test: /\.mp3$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'audio/' } } ] } ] } } ``` 上面的配置会将所有后缀为.mp3的文件复制到outputPath指定的目录下,并生成一个对应的URL。 然后,在Vue组件中,可以使用这个URL来播放音频: ```javascript mounted() { var audio = new Audio('audio/audio.mp3'); audio.play(); } ``` 这样就可以将MP3语音打包到线上了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

千变小黑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值