首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Js自动播放HTML音乐(不受浏览器限制,无需先与浏览器交互,无需对浏览器进行修改)

众所周知,声音无法自动播放一直是IOS/Android上惯例。桌面版Safari2017年第11版宣布禁止带声音多媒体自动播放功能。...随后2018年4月发布Chrome 66正式关闭了声音自动播放,这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。...但是,当你运行它时候,你会发现你Chrome浏览器下调用play后错误: DOMException: play() failed because the user didn’t interact...然后有人问,既然谷歌Chrome背景音乐不能自动播放,究竟怎么解决呢? 这里使用Audio APIAudioContext来自于我搭建一个播放器。...; } 构建播放器后,可以进入页面时缓存,然后自动播放背景音乐,不考虑浏览器。 注意事项 这种方法只对浏览器有效,无法实现APP上自动播放音乐效果。

5K80

W3C: 开发专业媒体制作应用 (1)

如果操作正确,decodeAudioData() 会很乐意解码文件一部分,因为它认为它正在解码整个文件。但是,decodeAudioData() 最新版本 Safari 浏览器中坏了。...但是,既然 Chromium 和 Firefox 中都支持 WebCodecs,所以这些都不再必要了。 下放工作 下放工作 另一件至关重要事情是尽可能多工作下放到其他线程。...想象一下,构建一个媒体专业人士每天依靠网络应用程序来完成他们工作。突然,浏览器更新导致该应用程序失败。我知道即使是 Safari 浏览器也可以非常及时获得安全更新。...但它们并没有很好记录在案,它们总是落后于浏览器功能,可悲是,它们有不时断裂倾向。至少据我所知,以编程方式启动浏览器时,甚至无法 Safari 浏览器中禁用自动播放策略。...这意味着 Safari 浏览器中测试更困难。这反过来意味着错误捕获更少。这当然是一个真正问题,因为正如我之前所说,一个典型错误会在 Safari 浏览器中停留至少 6 个月。

85830
您找到你想要的搜索结果了吗?
是的
没有找到

1000多个项目中十大JavaScript错误以及如何避免

当你读取一个属性或调用一个未定义对象方法时,Chrome 中就会报出这样错误。 [image.png] 导致这个错误发生原因有很多,常见一种情况是渲染 UI 组件时,不正确初始化状态。...这是 Safari 中读取属性或调用未定义对象上方法时发生错误,这与 Chrome 上述错误基本相同,只是 Safari 使用不同错误消息。...[image.png] TypeError: Null Is Not an Object (evaluating...) 这是 Safari 中读取属性或调用空对象上方法时发生错误。...[image.png] 有趣是, JavaScript 中,null 和 undefined 是两种不同类型,这就是为什么会出现两个不同错误消息。...}; Uncaught RangeError: Maximum Call Stack 这是很多种情况,Chrome 中发生错误,一种情况是当你调用一个不会终止递归函数时。

6.2K30

10 种 JavaScript 最常见错误

当你读取一个未定义对象属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易 Chrome 开发者控制台中进行测试。 ?...2、 TypeError: ‘undefined’ is not an object 这是 Safari 中读取属性或调用未定义对象上方法时发生错误。...您可以 Safari Developer Console 中轻松测试。这与第一点中提到 Chrome 错误基本相同,但 Safari 使用了不同错误消息提示语。 ?...3、 TypeError: null is not an object 这是 Safari 中读取属性或调用空对象上方法时发生错误。...我们工作中,这种错误可能发生一种场景是:如果在加载元素之前尝试 JavaScript 中使用元素。 因为 DOM API 对于空白对象引用返回值为 null

8.4K20

chrome 66自动播放策略调整

[ba44d518-eb46-4ce8-8a65-6abae68a8840] 背景 Web浏览器正在朝着更严格自动播放策略发展,以便改善用户体验,最大限度降低安装广告拦截器积极性并减少昂贵和/或受限网络上数据消耗...桌面上,用户媒体参与指数阈值(MEI)已被越过,这意味着用户以前播放带有声音视频。 移动设备上,用户已将该网站添加到主屏幕。 顶部框架可以将自动播放权限授予其iframe以允许自动播放声音。...因此,Chrome会计算媒体参与度分数,该分数定期播放媒体网站上最高。足够高时,媒体播放只允许桌面上自动播放。MEI是谷歌自动播放策略一部分。...,play()不带用户手势调用将拒绝带有NotAllowedErrorDOMException promise。...Chrome企业政策 Chrome企业策略可以改变这种新自动播放行为,以用于例如信息亭或无人值守系统。

4.8K20

10 种最常见 Javascript 错误

当你读取一个未定义对象属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易 Chrome 开发者控制台中进行测试(尝试)。 ?...TypeError: ‘undefined’ is not an object 这是 Safari 中读取属性或调用未定义对象上方法时发生错误。...您可以 Safari Developer Console 中轻松测试。这与 1 中提到 Chrome 错误基本相同,但 Safari 使用了不同错误消息提示语。 ? 3....TypeError: null is not an object 这是 Safari 中读取属性或调用空对象上方法时发生错误。...Uncaught RangeError: Maximum call stack 这是 Chrome 一些情况下会发生错误。 一个是当你调用一个不终止递归函数。

6.7K80

1000个项目中前10名JavaScript错误介绍

当你读取一个未定义对象属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易 Chrome 开发者控制台中进行测试(尝试)。...TypeError: ‘undefined’ is not an object 这是 Safari 中读取属性或调用未定义对象上方法时发生错误。...您可以 Safari Developer Console 中轻松测试。这与 1 中提到 Chrome 错误基本相同,但 Safari 使用了不同错误消息提示语。 3....TypeError: null is not an object 这是 Safari 中读取属性或调用空对象上方法时发生错误。...Uncaught RangeError: Maximum call stack 这是 Chrome 一些情况下会发生错误。 一个是当你调用一个不终止递归函数。

6.2K10

来自1000多个项目的10大JavaScript错误浅析

Chrome里读取未定义对象属性或调用未定义对象方法时就会发生这个错误Chrome开发者控制台可以很容易地重现这个错误。...TypeError: ’undefined’ is not an object Safari里读取未定义对象属性或调用未定义对象方法时就会发生这个错误Safari开发者控制台可以很容易地重现这个错误...这个错误与发生在Chrome是差不多,只是Safari为它提供了不同错误信息。 3....TypeError: null is not an object Safari里读取空(null)对象属性或调用空对象方法时就会发生这个错误Safari开发者控制台可以很容易地重现这个错误。...TypeError: ‘undefined’ is not a function Chrome调用一个未定义函数时就会发生这个错误,可以Chrome开发者控制台和Mozilla开发者控制台重现这个错误

6.2K80

1000多个项目中十大JavaScript错误以及如何避免

当你读取一个属性或调用一个未定义对象方法时,Chrome 中就会报出这样错误。 ? 导致这个错误发生原因有很多,常见一种情况是渲染 UI 组件时,不正确初始化状态。...这是 Safari 中读取属性或调用未定义对象上方法时发生错误,这与 Chrome 上述错误基本相同,只是 Safari 使用不同错误消息。 ? 3....TypeError: Null Is Not an Object (evaluating...) 这是 Safari 中读取属性或调用空对象上方法时发生错误。 ?...有趣是, JavaScript 中,null 和 undefined 是两种不同类型,这就是为什么会出现两个不同错误消息。未定义通常是一个尚未分配变量,而 null 则表示该值为空。...Uncaught RangeError: Maximum Call Stack 这是很多种情况,Chrome 中发生错误,一种情况是当你调用一个不会终止递归函数时。 ?

8.2K40

ES6学习之函数传参

Microsoft Edge Opera Safari 46 27 - Supported - 7.1 移动端 Chrome for Android Firefox Mobile Safari Mobile...下面是主流浏览器对于剩余运算符支持情况: PC端 Chrome Firefox Internet Explorer Microsoft Edge Opera Safari 47 15 - Supported...); // 0, null foo(); // 10, 10 ES6中,我们可以直接在函数声明中使用缺省参数,只有未传递实参情况下才会生效,不会对0和null情况生效。...值得一提是,可以用函数作为缺省值,只有参数缺省时候才会对该函数进行调用。另一个特性是后面的缺省值可以直接使用前面所声明参数变量。...为了避免函数运行中出现参数为undefined情况,我们可以函数调用时候,就对参数进行检查,对于必须提供参数可以一开始就抛出异常,这有利于开发阶段提前解决问题,也有利于函数健壮性和可测试性

1.5K20

ES6学习之函数传参

Microsoft Edge Opera Safari 46 27 - Supported - 7.1 移动端 Chrome for Android Firefox Mobile Safari Mobile...下面是主流浏览器对于剩余运算符支持情况: PC端 Chrome Firefox Internet Explorer Microsoft Edge Opera Safari 47 15 - Supported...); // 0, null foo(); // 10, 10 ES6中,我们可以直接在函数声明中使用缺省参数,只有未传递实参情况下才会生效,不会对0和null情况生效。...值得一提是,可以用函数作为缺省值,只有参数缺省时候才会对该函数进行调用。另一个特性是后面的缺省值可以直接使用前面所声明参数变量。...为了避免函数运行中出现参数为undefined情况,我们可以函数调用时候,就对参数进行检查,对于必须提供参数可以一开始就抛出异常,这有利于开发阶段提前解决问题,也有利于函数健壮性和可测试性

2K100

ES6学习之函数传参

Microsoft Edge Opera Safari 46 27 - Supported - 7.1 移动端 Chrome for Android Firefox Mobile Safari Mobile...下面是主流浏览器对于剩余运算符支持情况: PC端 Chrome Firefox Internet Explorer Microsoft Edge Opera Safari 47 15 - Supported...); // 0, null foo(); // 10, 10 ES6中,我们可以直接在函数声明中使用缺省参数,只有未传递实参情况下才会生效,不会对0和null情况生效。...值得一提是,可以用函数作为缺省值,只有参数缺省时候才会对该函数进行调用。另一个特性是后面的缺省值可以直接使用前面所声明参数变量。...为了避免函数运行中出现参数为undefined情况,我们可以函数调用时候,就对参数进行检查,对于必须提供参数可以一开始就抛出异常,这有利于开发阶段提前解决问题,也有利于函数健壮性和可测试性

1.9K20

当代 Web JSON 劫持技巧

或许它在进行一些字符编码扫描,亦或是截断相应和 NULL 后面的字符 Edge 上不是一个有效 JS 变量。我不确定,但是测试中,似乎需要一个 NULL 与其他一些填充字符。...如你所见,Edge 似乎 NULL 后截断了响应。请注意这种攻击是相当受限,因为许多字符组合不会产生有效 JavaScript 变量。然而,窃取少量数据可能是有用。...那么我们变量调用者泄漏了。你必须调用函数 toString 方法,为了获得数据访问,否则 Chrome 抛出一个通用访问异常。... Safari 中窃取 JSON 推送 我们也很轻松可以最新版本 Safari 中实现同样事情。我们仅需要少使用一个 proto ,并且从代理中使用 “name” 而不是调用者。...总结 Edge,SafariChrome 包含错误让你可以跨域读取未声明变量。你可以使用不同编码绕过 CSP 绕过并窃取脚本数据。

2.4K60

Safari上使用WebRTC指南

我花了很多个月努力将WebRTC集成到Safari中,用于非常复杂视频会议应用程序。我大部分时间花在了iOS工作上,尽管下面的一些指针也适用于MacOS上Safari。...为避免用户混淆,如果他们尝试Safari之外其他浏览器/环境中打开您应用,您可能希望包含一些有用用户错误消息。...因此,如果您正在使用这些事件,例如,为了处理调用清理,您将需要重构代码,以Safari上使用 “pagehide”事件。...测试中,许多(但不是全部)Android手机都采用硬件H.264编码,但那些缺少硬件编码手机Chrome中不能用于Android。...还有一些主要错误- 捕获音频iOS 12 Beta发布周期大部分时间内完全被破坏(谢天谢,他们最终修复了Beta 8)。

2.8K20

原 九、客户端检测

return document.documentElement.clientWidth; //错误用法!...chrome: 0, //具体版本号 ver: null }; //平台、设备和操作系统 var system = { win: false, mac: false, unix...例如,脚本调用某个函数之前,可能要先检测该函数是否存在。这种检测方法将开发人员从考虑具体浏览器类型和版本中解放出来,让他们把注意力集中到相应能力是否存在上。...能力检测无法精确检测特定浏览器和版本。 2、怪癖检测:怪癖实际上是浏览器实现中存在bug,例如早期 Webkit中就存在一个怪癖,即它会在for-in循环中返回被隐藏属性。...由于怪癖检测与能力检测相比效率更低,因此应该只某个怪癖会干扰脚本运行情况下使用。怪癖检测无法精确检测特定浏览器和版本。 3、用户代理检测:通过检测用户代理字符串来识别浏览器。

1.4K60

JavaScript Errors 指南

throw 操作符抛出一个字符串错误(**译者注:上面第三种方式)或者或者抛出null 这两种方式都是不推荐,因为浏览器无法就以上两种方式生成追溯栈,也就导致了无法追溯错误代码中位置,因为推荐抛出一个...Chrome DevTools 已经支持了异步追溯栈,换句话说,追溯栈追溯一个错误时候也会显示引入异步调用那一调用帧。...使用setTimeout情况下,Chrome中会捕获谁调用了产生错误setTimeout 函数。...然而,Firefox、Safari或者IE11中,并不会引入跨域JS错误,及时Chrome中,如果使用try/catch将这些讨厌代码包围,那么Chrome也不会再检测到这些跨域错误。...需要注意是,Firefox、Safari和IE11(不包括Chrome),父级页面中window.onerrorworker脚本中onerror注册监听函数被调用后,依然会被调用,但是,父级页面中

2K20

九、客户端检测

return document.documentElement.clientWidth; //错误用法!...chrome: 0, //具体版本号 ver: null }; //平台、设备和操作系统 var system = { win: false, mac: false, unix...例如,脚本调用某个函数之前,可能要先检测该函数是否存在。这种检测方法将开发人员从考虑具体浏览器类型和版本中解放出来,让他们把注意力集中到相应能力是否存在上。...能力检测无法精确检测特定浏览器和版本。 2、怪癖检测:怪癖实际上是浏览器实现中存在bug,例如早期 Webkit中就存在一个怪癖,即它会在for-in循环中返回被隐藏属性。...由于怪癖检测与能力检测相比效率更低,因此应该只某个怪癖会干扰脚本运行情况下使用。怪癖检测无法精确检测特定浏览器和版本。 3、用户代理检测:通过检测用户代理字符串来识别浏览器。

73510
领券