`
epy
  • 浏览: 326051 次
  • 性别: 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来播放音乐。

分享到:
评论

相关推荐

    Dreamweaver—网页播放声音方法七

    总结来说,网页播放声音在Dreamweaver中有多种实现方式,包括手动添加`&lt;BGSOUND&gt;`标签、使用行为功能,以及嵌入音频插件。同时,为了确保广泛的浏览器兼容性,开发者需要了解并适配Netscape的LiveAudio和IE的`...

    java 声音技术浅析

    ### 一、在Applet中播放声音 Java Applet因其强大的多媒体功能,尤其是声音播放能力,使得网页变得生动多彩。Java通过`AudioClip`类提供对声音的支持,主要兼容`.au`格式的声音文件。`AudioClip`类允许在Applet中...

    网页中插入多媒体对象

    本文将详细介绍如何在网页中插入多媒体,包括声音、视频、Flash对象、ActiveX控件以及其他媒体格式。 首先,让我们关注如何添加声音文件和视频。网页设计师实用教程中提到,Dreamweaver 8 提供了支持插入多种媒体...

    网页音乐播放器带播放列表.zip

    如果你想要添加新功能,比如歌曲搜索、随机播放或循环播放,你可以直接编辑JavaScript和HTML代码。理解代码结构和逻辑后,可以轻松进行扩展和定制。 总之,"网页音乐播放器带播放列表.zip"是一个基于JavaScript和...

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

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

    flash素材声音素材

    你可以在这里调整音量、淡入淡出效果、循环播放等。 4. 控制声音:通过ActionScript,你可以进一步控制声音的播放。例如,使用Sound对象创建声音实例,通过play()方法播放,stop()方法停止,setVolume()方法调整...

    JS播放声音 兼容所有浏览器

    在JavaScript(JS)中播放声音是一项常见的需求,特别是在网页交互、游戏开发或者用户通知场景下。要实现JS播放声音并且兼容所有主流浏览器,我们需要了解一些关键的技术和策略。以下是一些核心知识点: 1. **Audio...

    网页设计基础教程与上机指导导入声音和视频PPT学习教案.pptx

    - **重复次数设置**:可以设定声音的循环次数,例如在【属性】面板的【重复】文本框中输入数字来控制播放次数。 3. **声音的压缩**: - 在【库】面板中选中声音文件,通过【属性】对话框进行压缩设置,选择合适的...

    网页消息提醒音js

    网页消息提醒音js是网页应用中一种常见的交互设计,它能够通过播放特定的声音来通知用户有新的消息或者事件发生。这种技术在实时通讯、社交网络、在线协作工具等场景下非常常见,它能够提高用户的使用体验,使得用户...

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

    此外,用户可能已经在浏览网页时关闭了声音,或者正在一个不适宜播放声音的环境中,因此在设计网页时应考虑到这些因素,并为用户提供音乐播放与否的选项。 最后,上面提供的步骤涉及到了HTML、CSS以及可能的...

    jQuery+HTML5声音提示

    此外,还可以添加额外的功能,如调整音量、监听音频状态变化或者实现循环播放。HTML5的Audio对象提供了丰富的接口,如`volume`属性用于设置音量,`addEventListener`用于监听事件,如`ended`事件,可以在音频播放...

    有声音的烟花自动播放特效

    【描述】在"有声音的烟花自动播放特效"中,Canvas作为一个画布,允许开发者用JavaScript来绘制图形。此特效主要由以下几个关键部分组成:烟花发射、烟花上升、绽放、颜色过渡以及声音同步。每朵烟花的生命周期都经过...

    BeatMaker:BeatMaker使用JavaScript,CSS和HTML。 循环播放声音片段,更改速度,工作静音按钮以及多个音轨选项

    例如,通过`AudioContext` API,它可以控制音频的播放,实现循环播放声音片段。此外,JavaScript还用于处理用户交互,如响应用户点击的静音按钮,通过改变音频源的音量属性来实现静音效果。 CSS则在界面设计和布局...

    Flash按钮声音大全

    - 例如,`sound.play()`用于播放声音,`sound.stop()`停止播放,`sound.volume = value`可以设置音量,其中`value`在0(静音)到1(最大音量)之间。 5. **优化与兼容性**: - 考虑到文件大小和加载速度,通常会...

    复旦大学精品课程《计算机网络与网页制作》课件,添加动画,视频和声音课件复习资料.pptx

    复旦大学的精品课程《计算机网络与网页制作》涵盖了丰富的知识点,其中第14章主要讲解如何在网页中添加动画、视频和声音,以提升网页的互动性和用户体验。以下是这一章节详细的知识点解析: 1. **插入Flash动画(swf...

    多媒体与网页特效.pptx

    - 可以设置声音是否循环播放、是否随页面加载自动播放,以及音量等属性。 13.1.3 插入视频 随着网络带宽的提升,视频成为网页内容的重要组成部分。Flash Video(FLV)格式因其小体积和跨平台特性而受欢迎。插入...

    82添加网页特效之“播放音乐”网页案例.docx

    网页设计中,增添音乐效果能够极大地提升用户体验,为网页增加感染力,让访客在阅读内容的同时享受听觉盛宴。本案例聚焦于如何在网页中添加音乐,通过学习,你可以掌握如何插入音频文件,并了解不同音频格式的特点。...

    第3章 多媒体与网页特效.pptx

    4. 插入的Flash动画在文档中以灰色F图标表示,可以通过单击它在属性面板中设置相关属性,如播放、循环、质量等。 5. 为了使Flash与背景融合,可以通过设置参数使其背景透明。 13.1.2 插入声音 在网页中插入声音...

    flash声音大全

    - Flash还支持事件监听,如`SoundEvent.SOUND_COMPLETE`,当音频播放完毕时触发,这对于循环播放或链式播放声音很有用。 3. **声音素材的组织与管理**: - 压缩包中的"QQ飞车音效"可能是一系列与赛车游戏相关的...

    webview播放视频

    在网页的HTML代码中,你可以创建一个`&lt;video&gt;`元素,指定视频源(src)、宽高(width/height)以及其他属性如自动播放(autoplay)、循环播放(loop)等。例如: ```html Your browser does not support the ...

Global site tag (gtag.js) - Google Analytics