3条回答 默认 最新
- CSDN专家-showbo 2021-10-15 15:30关注
高版本chrome,Firefox不允许自动播放声音,视频的话可以muted静音后自动播放。声音需要和用户交互后如点击页面后才会播放。可以给document添加click事件执行播放操作,不过不点击就没搞头了。。鼠标移动事件不算交互动作,调用play会出错。
有帮助或启发麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
<audio src="music.mp3" loop autostart id="music" controls></audio> <script> function playMusic() { music.play();//移除事件 document.removeEventListener('click', playMusic); } document.addEventListener('click', playMusic); </script>
在火狐下用window.AudioContext+XHR加载可以播放,chrome 94+以上无效,其他版本的chrome知道能否生效。总的来说自动播放通过浏览器不现实,题主不用研究了。
<!doctype html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); let audioData, source; function audioAutoPlay(url) { let request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; request.onload = function() { console.log('音频文件加载完成'); audioCtx.decodeAudioData(request.response, function(buffer) { console.log('对音频解码完成'); audioData = buffer; playAudio() }, function(e) { console.log(e); }); }; request.send(); } function playAudio() { source = audioCtx.createBufferSource(); source.buffer = audioData; source.connect(audioCtx.destination); //source.loop = true; source.start(); source.onended = function (h) { console.log(h); } } function stopAudio() { source.stop(); } audioAutoPlay("../唐人街.mp3"); </script> 注意:由于用的是XMLHttpRequest加载的音频文件,不支持跨域加载。 <input type="button" value="play" onclick="playAudio();" /> <input type="button" value="stop" onclick="stopAudio();" /> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 matlab中使用gurobi时报错
- ¥15 WPF 大屏看板表格背景图片设置
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
- ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
- ¥16 mybatis的代理对象无法通过@Autowired装填
- ¥15 可见光定位matlab仿真
- ¥15 arduino 四自由度机械臂