[代码收集]通过html5的audio标签添加网页背景音乐代码 - 笑忘书网页代码收藏馆

首页-代码 2013-11-12 20:53:16 -0500

★通过html5的audio标签添加网页背景音乐代码★

请勿抄袭本页面

代码说明

<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="http://wodemo/a.mp3">*你的浏览器不支持audio标签</audio>

autoplay规定一旦音频就绪马上开始播放。如果设置了该属性，音频将自动播放。
controls规定浏览器应该为音频提供播放控件。如果设置了该属性，则规定不存在作者设置的脚本控件。
loop规定当音频结束后将重新开始播放。如果设置该属性，则音频将循环播放。
preload规定是否在页面加载后载入音频。如果设置了 autoplay 属性，则忽略该属性。auto - 当页面加载后载入整个音频，meta - 当页面加载后只载入元数据，none - 当页面加载后不载入音频
src规定要播放的音频的 URL。也可以使用<source>标签来设置音频。

【注意事项】HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式，但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持(详见此处)。不是所有的浏览器都支持MP3 OGG之类的，每个浏览器因为版权的问题支持的格式都是不一样的。

进入查看W3School相关教程和关于audio更详细内容

html代码(隐藏播放控件)

代码演示(隐藏播放控件)

音乐播放控件已被隐藏，背景音乐将自动播放

html代码(显示播放控件)

代码演示(显示播放控件)

显示音乐播放控件，背景音乐将自动播放，推荐使用这个，以便不想听的访客关闭背景音乐

[代码仅供参考，转载请注明出处]

----Comments(8)----
@pubut | @ at 2015-10-06 03:09:
不错啊！

石墨 (@1807572886) | @ at 2015-05-11 06:48:
怎么改音乐，，？？教我。。。

陌煜网络 (@mywl) | @ at 2013-12-03 22:23:
uc貌似没扣扣的效果好

笑忘书 (@35230) | @ at 2013-11-14 05:24:
貌似网速快才行

小孩 (@luchaorong) | @ at 2013-11-14 05:14:
为什么没自动播放？只有下面这个点击播放才有声音

小孩 (@luchaorong) | @ at 2013-11-14 05:13:
偷走偷走

月之魂 (@youqiang) | @ at 2013-11-12 22:17:
谢谢分享

笑忘书 (@35230) | @ at 2013-11-12 20:57:
建议用较小的MP3文件

Subscribe | Register | Login | N