用AudioContext解决谷歌浏览器Chrome不能自动播放音频问题

2018年11月22日14:18:53 发表评论 65

只从前几天升级浏览器后发现另一个站点ssslove.com打开后无法自动播放歌曲了。之前用的是Html的autoplay,现在谷歌浏览器禁止网页用autoplay播放音频视频了,Mac下Safari好像也是不让自动播放音频视频的。

在网上搜索几圈以后发现很多相似内容,基本出于同一个人的文章。而这文章主要给广大程序员提供一个解决方式和思路,虽然有代码,但是不可以直接使用的。最后总算找到可以直接使用的代码了,万分感谢这位提供代码的仁兄——香草布丁

  1. window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
  2. try {
  3. var context = new window.AudioContext();;
  4. var source = null;
  5. var audioBuffer = null;
  6. function stopSound() {
  7. if (source) {
  8. source.stop(0); //立即停止
  9. }
  10. }
  11. function playSound() {
  12. source = context.createBufferSource();
  13. source.buffer = audioBuffer;
  14. source.loop = true;
  15. source.connect(context.destination);
  16. source.start(0); //立即播放
  17. }
  18. function initSound(arrayBuffer) {
  19. context.decodeAudioData(arrayBuffer, function (buffer) { //解码成功时的回调函数
  20. audioBuffer = buffer;
  21. playSound();
  22. }, function (e) { //解码出错时的回调函数
  23. console.log('Error decoding file', e);
  24. });
  25. }
  26. function loadAudioFile(url) {
  27. var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
  28. xhr.open('GET', url, true);
  29. xhr.responseType = 'arraybuffer';
  30. xhr.onload = function (e) { //下载完成
  31. initSound(this.response);
  32. };
  33. xhr.send();
  34. }
  35. loadAudioFile('https://wuqishi.com/xxx.mp3');
  36. $("#stop").click(function () {
  37. stopSound();
  38. });
  39. } catch (e) {
  40. console.log('!Your browser does not support AudioContext');
  41. }
吴蛋蛋

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: