js --自动播放音频
简介
音频的播放使用audio进行操作,可以有两种方式处理(纯js和html标签+js)。
audio是html5的新标签,用于定义声音
audio的属性(引用w3school)
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 规定视频输出应该被静音。 |
preload | preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
基本使用
①html标签
<audio id="myaudio" src="exa.wav" autoplay="autoplay" controls="controls" loop="loop"
preload="preload" muted="muted">
不支持audio标签
</audio> <script type="text/javascript">
document.getElementById("myaudio").play();
</script>
②js版本
<button onclick="voicePaly()">启动</button>
<button onclick="voiceClose()">停止</button> <script type="text/javascript">
var audio;
function voicePaly () {
audio = "exa.wav";
audio = new Audio(audio);
// 循环播放,播放结束继续播放
$(audio).unbind("ended").bind("ended", function(){
audio.play();
})
audio.play();
}
function voiceClose () {
audio.pause();
}
</script>
chrome下无法自动播放问题处理
浏览器为了提高用户体验,减少数据消耗,chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能,无用户交互的情况下js调用play也被禁用,会直接抛出错误 “Uncaught (in promise) DOMException”
关于无法自动播放的解决方案整理如下:
更改浏览器设置,支持自动播放(分低版本和高版本两种设置)
》chrome地址栏输入“chrome://flags/#autoplay-policy”,回车打开页面
》将“Autoplay policy” 更改为 “no user gestrue is required”,点击页面右下方的 “relaunch now”按钮保存更改即可
对于chrome 76.X版本没有Autoplay选项,参考下列方式设置
》如上,地址栏输入“chrome://flags/#autoplay-policy” 并回车打开页面
》找到选项 “Touch Events API”,改为 “Automatic” 即可,保存设置
参考资料:
https://www.inqingdao.cn/5988.html
https://blog.csdn.net/badmoonc/article/details/86529752
js --自动播放音频的更多相关文章
- JS自动播放音频 无效chrome设置 (Uncaught (in promise) DOMException: play() failed because the user didn't interact)
Chrome的autoplay政策在2018年4月做了更改.新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策非常简单 muted ...
- jquery自动播放音频文件
使用jquery自动播放音频文件 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- 解决在ios下不能自动播放音频的问题
在ios下面是不允许自动播放音频这个操作的,不过我们可以使用微信提供的sdk来做到自动播放音乐的功能 wx.ready(()=>{}) 引入微信的sdk,之后在回调函数里面执行主动触发背景音乐播 ...
- 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught (in promise) DOMException
转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...
- 关于iphone自动播放音频和视频问题的解决办法
大家都知道 做移动端 会遇到音频和视频无法自动播放问题(我也遇到了)于是想办法解决这个问题 我只是找到了在微信中解决的办法(如果谁有在别的浏览器有这个办法 请私聊我 )我是没有发现 document ...
- 使用 AudioContext 播放音频 解决 谷歌禁止自动播放音频
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...
- Html5-audio标签简介及手机端不自动播放问题
1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...
随机推荐
- x86-64数据格式、通用寄存器与操作数格式
x86-64数据格式.通用寄存器与操作数格式 数据格式 Intel用术语"字(word)"表示16位数据类型,32位为"双字(double words)", ...
- Rust开发环境搭建
1.Rust概述 按照百度百科的说法,Rust是一门系统编程语言 ,专注于安全 ,尤其是并发安全,支持函数式和命令式以及泛型等编程范式的多范式语言.Rust在语法上和C++类似 ,但是设计者想要在保证 ...
- java.lang.IllegalArgumentException: java.util.zip.ZipException: invalid LOC header (bad signature)异常解决方法
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start com ...
- CSS元素显示模式
CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...
- basename剔除目录
给出一个包含有指向一个文件的全路径的字符串,本函数返回基本的文件名.如果文件名是以 suffix 结束的,那这一部分也会被去掉 Examples: basename /usr/bin/sort Out ...
- Apache配置https
Apache配置https 之前一直用的是Tomcat,今天突然接到任务要给Apache配置https证书,因为小程序要用.下面把过程列出来以备后续查看. 1.首先你得有ssl证书,没有的可以去购买, ...
- Troubleshooting ORA-30036 - Unable To Extend Undo Tablespace (Doc ID 460481.1)
Troubleshooting ORA-30036 - Unable To Extend Undo Tablespace (Doc ID 460481.1) APPLIES TO: Oracle Da ...
- Python推导表达式、迭代器、生成器、模块和包
推导表达式 yield用法 模块的概念和导入方法 包和包管理 推导表达式(利用for,一个一个地放入数据) 列表推导 集合推导 字典推导 迭代器 迭代 for 迭代变量 in 可迭代对象 每一次循环都 ...
- 5-5 可视化库Seaborn-多变量分析绘图
Parameters:¶ 参数 解释 变量 x,y,hue 数据集变量 变量名 date 数据集 数据集名 row,col 更多分类变量进行平铺显示 变量名 col_wrap 每行的最高平铺数 整 ...
- golang数据结构和算法之BinarySearch二分查找法
基础语法差不多了, 就需要系统的撸一下数据结构和算法了. 没找到合适的书, 就参考github项目: https://github.com/floyernick/Data-Structures-and ...