选择音频自动播放

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择音频自动播放</title>
</head>
<body>
<audio controls autoplay loop>
<source src="music/莫斯科没有眼泪(钢琴曲).mp3" type="audio/mp3">
</audio>
<p>
<select onclick="getinfo()" name="sel" id="sel" size="8" style="width: 300px;">
<option>莫斯科没有眼泪(钢琴曲).mp3</option>
<option>陆展博最后表白插曲.mp3</option>
<option>平凡之路(纯音乐).mp3</option>
<option>霞光(伴奏).mp3</option>
<option>治礼亚.mp3</option>
<option>霞光.mp3</option>
</select>
</p>
<script>
function getinfo(){
document.getElementsByTagName("audio")[0].getElementsByTagName("source")[0].src = "music/"+document.getElementById("sel").value;
document.getElementsByTagName("audio")[0].load();
document.getElementsByTagName("audio")[0].play();
}
</script>
</body>
</html>

时间: 2024-12-12 11:59:20

选择音频自动播放的相关文章

关于音频自动播放的问题

之前工作中遇到的音频文件在移动端不能自动播放的问题,后来发现在pc端初始页面第一次加载页面的时候(注意:是没有缓冲的情况下),这个时候音频也是无法自动播放的,会在控制台输出错误:如图 翻译错误代码:Uncaught (in promise) DOMException: play()失败,因为用户没有首先与文档交互. 也就是说音频还没有被加载 **以下是看了别人文章后的个人感悟,如果有错误的地方,请各位大神指教!**如有更好的方法,欢迎留言! 问题代码: html部分 <audio src="

解决移动端音频自动播放问题

<audio id="audio" autoplay='autoplay' loop='loop'> <source src="SeeYou.mp3" type="audio/ogg"> <source src="SeeYou.mp3" type="audio/mpeg"></audio> 在开发webapp时,有时候你可能要加点背景音乐,这时我们会用到HTM

H5页面音频自动播放问题

最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源.一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折. 下面有三种常规的方式,可以创建自动播放的audio对象: 第一种:页面上创建一个audio标签,写好相关的属性,如:autoplay='autoplay',正常情况下,这里写上资源地址之后,访问页面之后就可以自动播放了.但是如果音乐资源地址不确定,需要js改变的话,就需要使用JS来实现了. (function() { var aud

H5中背景音乐无法自动播放问题

苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流. 除非用户物理点击一次屏幕,其实现在不能苹果手机,其他的安卓手机和部分App有时也存在背景音不能自动播放的问题. 背景音不能自动播放的场景及解决办法 解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览

WebView中音视频自动播放与退出时停止播放

背景: 项目需求是进入页面自动播放音频或者视频(非本地资源),页面关闭时音频或视频关闭.现在实现情况是:自动播放功能在有些手机上可以自动播放并有声音,有的手机上也播放但没有声音,当用户点击或者产生触发条件下才会有声音:退出关闭当前Activity,音频或视频并没有关闭,还在播放. 解决方法: 1.Activity退出时关闭音频或视频 重写Activity的onDestroy()方法,在方法里添加webView.destroy()方法. @Override protected void onDes

关于iphone自动播放音频和视频问题的解决办法

大家都知道 做移动端 会遇到音频和视频无法自动播放问题(我也遇到了)于是想办法解决这个问题 我只是找到了在微信中解决的办法(如果谁有在别的浏览器有这个办法  请私聊我 )我是没有发现 document.getElementById('demo').play(); //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { docume

ios微信上无法自动播放音频的情况

今天做个html5需要自动播放音频,发现在ios下autoplay="autoplay"是失效的 就想着强制用js强制播放 document.getElementById('music').play(); 发现并没有用 加上这段代码后才有作用 document.getElementById('music').play(); document.addEventListener("WeixinJSBridgeReady", function () {//监听微信准备就绪

微信自动播放音频的解决方案

微信自动播放音频的解决方案,亲测有效: wx.ready(function () {    wx.getNetworkType({        success: function (res) {            document.getElementById('ring').play()        }    })})

ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)

ios为了用户隐私安全,禁止自动播放音频文件 //通过参数给音频设置id和路径 utils = { playAudio: function (id, src) { var audio = $('#' + id); if (audio.attr('src') == undefined) { audio.attr('src', src); } //audio[0].play(); function audioAutoPlay() { audio[0].play(); document.addEven