原因
1. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
2. The Web Audio autoplay policy will be re-enabled in Chrome 70 (October 2018). Please check that your website is compatible with it. https://goo.gl/7K7WLu

解决方案1

var url = 'http://yourdomain/music';
var context = new AudioContext();
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.responseType = 'arraybuffer';

var music = {};

req.onload = function () {
context.decodeAudioData(req.response, function (buf) { // 将拿到的audio解码转为buffer
var getSource = function () { // 创建source源。
var source = context.createBufferSource();
source.buffer = buf;
source.connect(context.destination);
return source;
};

music.start = function () { // 游戏开始
console.log('hhh')
getSource().start();
};
music.start();

},
(error) => {
if (window.console && window.console.error) {
window.console.error(`音频: ${url} 读取错误`, error);
hasWebAudioAPI.data = false;
}
});
};

req.send();

方案2

<audio id="player" autoplay>
<source src="audio/source.mp3" type="audio/mp3">
</audio>

// 需要用户点击一次屏幕
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('player').play();
document.removeEventListener('click', musicPlay);
}

转载于:https://juejin.im/post/5d020e61e51d4555e372a5dd

The Web Audio autoplay policy will be re-enabled in 音频无法播放相关推荐

  1. 如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音

    by _haochuan 通过_haochuan 如何使用Web Audio API听到" Yanny"和" Laurel"的声音 (How you can h ...

  2. Web Audio API

    Web audio concepts and usage 1.创建audio context 2.在context中创建source,例如<audio>, OscillatorNode, ...

  3. Web Audio API 入门1

    将吉他和效果器(effect pedal 比如失真效果器)链接,然后将效果器和放大器(amplifier)链接,最后将放大器和音响(speaker)连接,既:吉他-效果器–放大器-音响 Web Aud ...

  4. webaudio ajax,Web Audio 入门之读取左右声道数据

    说到音频,大家应该立刻会想到Audio,和Audio标签完全不同,Web Audio的功能更为强大.Audio 和 Web Audio的关系,就像img和canvas的关系一样. Web Audio ...

  5. Web Audio API与WebSocket播放实时音频

    WebSocket客户端与Web Audio API示例 <!DOCTYPE html> <html><head><meta charset="ut ...

  6. 【Web】1326- 深入浅出 Web Audio API

    前言 2011被提出,同年草案被Google Chrome和Mozilla Firefox实现 在此之前Web音频较为原始,无法应付较为复杂的应用场景,例如Web游戏或互动应用 旨在提供全套Web音频 ...

  7. HTML 利用 Web Audio API 进行音频可视化

    利用Web Audio API 进行音乐可视化 1.什么是 Web Audio API: 官方:Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对 ...

  8. IESM项目实训四——Web Audio录音和字符串转拼音

    IESM项目实训四 通过浏览器录制音频,生成可供百度语音识别api使用的pcm音频文件,然后将音频数据传至后端.根据百度语音识别api文档要求,音频文件为pcm格式,单音道,16k采样率,16位深. ...

  9. HTML5 Web Audio Api-2 发声oscillator

    (Web Audio Api基础信息整理中,到时候补上) oscillator的意思是振荡器,众所周知,声音就是物体振动产生的声波. 在Web Audio Api中,官方给我们提供了一个振荡器 需要用 ...

最新文章

  1. Caffe 关于 LetNet-5 之 lenet_solver.prototxt 解析
  2. linux6下kdump的配置
  3. 【自动化测试】搭建一个简单从Excel读取用例内容并输出结果的脚本
  4. Lambda标准格式
  5. [Objective-C语言教程]动态绑定(32)
  6. EEPlat 主子表和对象引用配置实例
  7. aix 查看内存,CPU 配置信息
  8. IDEA+Maven:cannot download sources
  9. layui form模块
  10. android修改用户名和密码错误,Android应用开发Android Studio 修改用户名、密码、URL等操作教程...
  11. 分治法(divide conquer)与动态规划(dynamic programming)应用举例
  12. GridView的多表头(排序)实例方法
  13. MySql嵌套查询+关联查询+多表查询+对应案例+mybatis动态sql 超详细
  14. 160个CrackMe破解思路合集
  15. 统计碱基数目、GC含量、read数、最长的read、最短的read及平均read长度
  16. EasyFlash 里的 EF_WRITE_GRAN
  17. Android 触摸OnTouchListener没有响应问题解决
  18. vue组件走马灯_Vue-component | 文字走马灯组件
  19. 浙里办APP的系统架构分析
  20. 规则引擎——Drools

热门文章

  1. CentOS系统配置solr
  2. ARM开发板系统移植-----kernel的编译
  3. uvision4 ide已停止工作
  4. AndroidのActivity之退出返回栈(二)
  5. [原创]浅谈在创业公司对PMF的理解
  6. 数据段、代码段、堆栈段、BSS段的区别
  7. 背包类树形DP 选课题解
  8. windows系统内实现端口转发
  9. HDU 1317 XYZZY(floyd+bellman_ford判环)
  10. 自己整理的排序算法之(1) 选择排序