`
weitao1026
  • 浏览: 992143 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

如何在网页中循环播放声音

阅读更多
HTML中可以播放声音的标签有bgsound、embed、audio、object等,下面先简单介绍这几个标签

<bgsound>:
  <bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多。如下
  <bgsound src="your.mid" autostart=true loop=infinite>
src="your.mid"
设定声音文件的路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop=infinite
是否自动反复播放。loop=2 表示重复两次,infinite 表示重复多次。


<embed>:
  <embed> 是用来插入各种多媒体,格式可以是 midi、wav、aiff、au 等等,新版的 ie支持,但Chrome对这个标签的支持不好,无法实现循环播放的功能。其参数设定较多。如下:
  <embed src="your.mid" autostart="true" loop="true" hidden="true">
src="your.mid"
设定声音文件的路径,可以是相对或绝对。
autostart=true
是否在音乐档下载完之后就自动播放。true 是,false 否 (内定值)。
loop="true"
是否自动反复播放。loop=2 表示重复两次,true 是, false 否。
hidden="true"
是否完全隐藏控制画面,true 为是,no 为否 (内定)
还有starttime、volume、width、high、align、absmiddle、absbottom、controls等参数。


<audio> 元素
<audio> 元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在大部分浏览器中都有效。
注意:这个标签在低版本IE中(如:IE8)没有效果。
例子:
<audio src="alert.wav" autoplay="autoplay" loop="loop"/>
属性列表:
属性     值       描述
autoplay  autoplay  如果出现该属性,则音频在就绪后马上播放。
controls controls  如果出现该属性,则向用户显示控件,比如播放按钮。
loop     loop 如果出现该属性,则每当音频结束时重新开始播放。
preload  preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src     url 要播放的音频的 URL。


<object> 元素
<object> 标签也可以定义外部(非 HTML)内容的容器。可以使用此元素向 XHTML 页面添加多媒体。
下面的代码片段能够显示嵌入网页中的 MP3 文件:
实例:
<object height="100" width="100" data="song.mp3"></object>
问题:
•不同的浏览器对音频格式的支持也不同。
•如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
•如果用户的计算机未安装插件,无法播放音频。


    为实现循环播放音乐,可以采取如下的解决方案(jQuery下):
if($.browser.msie) {
    $('body').append('<bgsound src="alert.wav" loop="-1"/>');
} else {
    $('body').append('<audio src="alert.wav" autoplay="autoplay" loop="loop"/>');
}
     因为IE的安装受限于操作系统,所以很多用户使用的IE版本并不高,就使用bgsound来播放音乐;其它浏览器比如FireFox、Chrome可以很方便地升级到最新版本,可以使用audio来播放音乐。
分享到:
评论

相关推荐

    简单的一个网页循环定时播放器

    这是利用一个JAVASCRIPT做的一个网页,比较简单,但是非常实用,我设置的是每1分钟播放一次,也即是提醒一次(声音可以自己进行修改,时间也可以自己修改)。可以利用它来做一些需要规定时间完成的一些事,例如公务...

    音乐播放器 网页版

    音乐播放器 能实现顺序播放,循环播放等 界面友好 可以添加删除音乐等 可以调节声音大小

    网页音乐播放器

    播放模式(随机、循环、单曲) 大背景、场景图片及动画、皮肤 设置 歌词 支持修改文字 大小颜色 支持自定义播放器大小及坐标 支持分类列表及歌曲列表 支持数据xml文件加密 支持使用者增加及删除歌曲 支持音乐备用...

    Dreamweaver怎么添加背景音乐?dw添加声音文件的方法

    Dreamweaver怎么添加背景音乐?想让网页打开就会有歌声出现,该怎么设置呢?今天我们就来看看给网页添加声音文件的详细方法,图文教程,需要的朋友可以参考下

    网页中嵌入播放器embed元素autostart false失效

    在网页中嵌入播放器播放声音文件的需求,最后使用了embed元素,不过embed元素 autostart false 失效该如何解决,下面为大家详细介绍下

    精易官方免费模块v3.60版

    3.完善 “网页_禁止允许gif图片”“网页_禁止允许显示图片” “网页_禁止允许背景声音”“网页_禁止允许点击声音” “网页_禁止允许播放网页视频”“网页_禁止允许一键操作” 的备注信息 1.增加网页_禁止允许一键...

    MP3播放器1.3之HTML5AUDIO

    1.播放本地歌曲,模式包括单曲播放/单曲循环播放/顺序播放/顺序循环播放 2.自主选择文件和删除文件,自由切换上一首/下一首,随时暂停/播放 3.显示正在播放歌曲和剩余时间,歌曲列表显示,支持声音调节和背景切换

    Unity-WebGL-Record:由于unitywebgl上不能用Microphone类,所以使用网页接口来实现

    Unity WebGL Record 由于unitywebgl上不能用Microphone类,所以使用网页接口来实现 关键交互在于调用plugins中的...另外本人不知道js中的float数组如何传入unity中,只能用在unity中for循环一个个赋值的笨办法

    vb.net音乐播放器 (Clearwind(v1.0))

    4、选择歌曲模式选择想听的歌曲进入歌曲循环(类似网页音乐选择播放) 5、可以对列表进行查找 6、托盘显示,托盘快捷方式 7、随机、列表循环、单曲三种常用播放模式 8、支持歌曲进度条拖动、时间显示与声音...

    Python基础入门知识 Python编程基础教程 Python学习笔记 共27个章节 共142页.pdf

    【目录】 1.01编写简单程序 4 0.1py软件的创建 8 ...1.21播放声音 107 1.22快捷键 114 1.23组合快捷键 118 文本界面中常用语句 123 1.24打开外部程序 127 1.25打开网页 129 1.26联网发表 132 1.27默认接入点 141

    delphi 开发经验技巧宝典源码

    0007 在Delphi中加载QReport报表组件 7 1.3 创建DLL文件 8 0008 生成一个DLL文件 8 0009 调用DLL文件 8 1.4 窗体相关操作 9 0010 将组件置前/置后 9 0011 如何锁定窗体中的组件 9 0012 如何改变窗体...

    delphi 开发经验技巧宝典源码06

    0007 在Delphi中加载QReport报表组件 7 1.3 创建DLL文件 8 0008 生成一个DLL文件 8 0009 调用DLL文件 8 1.4 窗体相关操作 9 0010 将组件置前/置后 9 0011 如何锁定窗体中的组件 9 0012 如何改变窗体...

    web-audio-hackday:2015 年苏格兰 JS 黑客日的网络音频 API 黑客

    鼓节奏音轨(.ogg 文件)在 Web 浏览器中连续加载、播放和循环播放。 一个网络音频API AnalyserNode是conected到音频源,并进行快速傅立叶变换(FFT),使我们能够对实时的声音访问信息。 API 的...

    精易模块[源码] V5.15

    9、改善“网页_访问”中最后一个参数(代理地址)为“”符号时无法访问网页,感谢易友【z00544】反馈。 精易模块 V3.82 what’s new:(20140816) 1、修复“时间_取现行时间戳”有时不能正常返回13位时间戳,当...

    PowerPoint.2007宝典 3/10

    11.5.2 更改人员在组织中的级别 231 11.5.3 控制下级布局选项 231 11.6 格式化图形 232 11.6.1 应用SmartArt样式 232 11.6.2 更改SmartArt颜色 233 11.6.3 为各形状手动应用颜色和效果 233 11.6.4 手动...

    PowerPoint.2007宝典 10/10

    11.5.2 更改人员在组织中的级别 231 11.5.3 控制下级布局选项 231 11.6 格式化图形 232 11.6.1 应用SmartArt样式 232 11.6.2 更改SmartArt颜色 233 11.6.3 为各形状手动应用颜色和效果 233 11.6.4 手动...

Global site tag (gtag.js) - Google Analytics