巧为网页添加背景音乐
- 格式:doc
- 大小:58.00 KB
- 文档页数:8
本案例将把音乐插入到网页中,以增强页面的感染力,使浏览者在浏览文字内容的同时可以听到优美舒缓的音乐。
如图所示,在页面上显示一个媒体播放器,用户可以控制音乐的播放过程。
图视听在线效果图【案例目的】掌握向网页中插入音乐的方法,理解常用的音频格式。
【实现思路】打开现有网页,在合适位置插入音频元素并设置播放属性。
【主要知识】音频文件的格式、插入音频文件的方法。
【相关知识介绍】音频元素也是网页中不可或缺的内容,在 Dreamweaver 中插入音频元素的方法有多种,灵活选用不同方法,以适应页面需要,同时照顾浏览者的感受。
8.2.1 常用的音频格式声音能极好地烘托网页页面的氛围,网页中常见的声音格式有WAV、MP3、MIDI、WMA、RM 等。
表8-1 列出了几种常见声音文件的特点。
8.2.2 插入音频1.使用<bgsound>标签嵌入背景音乐在网页中添加背景音乐可以使用<bgsound>标签,但只适用于IE,在Netscape 和Firefox浏览器中并不适用,具体步骤如下。
(1) 打开需要添加背景音乐的页面,切换到代码视图。
(2) 在<head>和</head>之间输入“<”,在弹出的代码提示框中选择“bgsound”,插入背景音乐代码,如图所示。
图插入背景音乐代码(3) 用鼠标右键单击bgsound,在弹出的快捷菜单中选择“编辑标签”,弹出“标签编辑器-bgsound”对话框,如图所示。
其中各参数的含义如下。
图“标签编辑器-bgsound”对话框•①“源”:设置音乐文件的路径,单击“浏览”按钮选择背景音乐文件。
•②“循环”:设置音乐循环的次数,“-1”为无限次循环。
•③“平衡”:音乐的左右平衡。
•④“音量”:音乐的音量设置,取值范围 0~100。
•⑤“延迟”:音乐播放时的延迟。
(4) 设置完毕后单击“确定”按钮,<bgsound>标签嵌入的背景音乐在页面上并不显示。
怎样在网页中插入背景音乐工具/原料∙软件 Dreamweaver∙带浏览器的电脑方法/步骤1. 1首先在网上下载一个Dreamweaver软件安装,当然使用其他的网站编程软件也可以。
2. 2打开软件界面如下。
3. 3选择“新建--HTML”4. 4之后面板大致如下图,代码部分笔者稍微删减了一些无用代码。
5. 5设置背景音乐有两种方法,这里给大家都讲解一下。
首先是直接设置音乐文件为背景音乐的代码“bgsound”,使用语法是“<bgsound src="背景音乐的路径">。
注意背景音乐设置要加在网页<body> </body>之间。
6. 6以下面的为例大致讲解一下。
下图表示打开这个网页就以笔者电脑桌面的”1.MP3“为背景音乐自动播放。
7.7可以点击下图所示的地方来预览使用效果。
8.8需要注意的是<bgsound src="背景音乐的路径">这种语法IE支持,但是有部分浏览器不支持,比如chrome,firefox等,打开时会没有背景音乐,该怎么办呢?这就需要第二种语法了。
第二种的语法可以适用于所有浏览器。
9.9第二种适用于所有浏览的语法就是插入多媒体文件的语法”embed“,使用这种语法不仅可以插入背景音乐,还可以插入视频文件。
基本语法是<embed src="背景音乐的路径" ></embed>10.10预览如下图,是一个播放框,打开网页就会自动播放音乐。
11.11接下来介绍一下播放的设置,包括播放框的大小,自动播放音乐,循环播放音乐以及隐藏面板等基本设置。
首先设置播放框的大小。
源码<embed src="背景音乐的路径" width="宽度" height="高度"></embed>12.设置播放高度和宽度都是333之后的预览。
有两种分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器。
二者的参数如下:■ <bgsound>:<bgsound> 是用来插入背景音乐,但只适用于IE,其参数设定不多。
如下<bgsound src="your.mid" autostart=true loop=infinite>src="your.mid"设定midi 档案及路径,可以是相对或绝对。
autostart=true是否在音乐档下载完之后就自动播放。
true 是,false 否(内定值)。
loop=infinite是否自动反复播放。
LOOP=2 表示重复两次,Infinite 表示重复多次。
■ <EMBED>:<EMBED> 是用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU 等等,Netscape 及新版的IE 都支持。
其参数设定较多。
如下下<EMBED src="your.mid" autostart="true" loop="true" hidden="true">src="your.mid"设定midi 档案及路径,可以是相对或绝对。
autostart=true是否在音乐档下载完之后就自动播放。
true 是,false 否(内定值)。
loop="true"是否自动反复播放。
LOOP=2 表示重复两次,true 是,false 否。
HIDDEN="true"是否完全隐藏控制画面,true 为是,no 为否(内定)。
STARTTIME="分:秒"设定歌曲开始播放的时间。
为你的网页添加背景音乐如何能使自己的网站与众不同、充满个性,一直是不懈努力的目标。
除了尽量提高页面的视觉效果、互动功能以外,如果能在打开网页的同时,听到一曲优美动人的音乐,相信这会使你的网站增色不少。
一、学会添加音乐文件为网页添加背景音乐的方法一般有两种,第一种是通过普通的<bgsound>标签来添加,另一种是通过<embed>标签来添加。
(一)使用<bgsound>标签用Dreamweaver打开需要添加背景音乐的页面,点击“代码”打开代码编辑视图,在<body></body>之间输入“<”在弹出的代码提示框中选择bgsound(图1)。
Dreamweaver自动输入“<bgsound”代码后按空格键,代码提示框会自动将bgsound标签的属性列出来供你选择使用。
bgsound标签共有五个属性,其中balance是设置音乐的左右均衡,delay是进行播放延时的设置,loop是循环次数的控制,src则是我们音乐文件的路径,volume是音量设置。
一般在添加背景音乐时,我们并不需要对音乐进行左右均衡以及延时等设置,所以仅需要几个主要的参数就可以了。
最后的代码如下:<bgsound src="music.mid"loop="-1">其中,loop="-1"表示音乐无限循环播放,如果你要设置播放次数,则改为相应的数字即可。
这种添加背景音乐的方法是最基本的方法,也是最为常用的一种方法,对于背景音乐的格式支持现在大多的主流音乐格式,如WAV、MID、MP3等。
如果要顾及到网速较低的浏览者,则可以使用MID音效作为网页的背景音乐,因为MID音乐文件小,这样在网页打开的过程中能很快加载并播放,但是MID也有不足的地方,它只能存放音乐的旋律,没有好听的和声以及唱词。
如果你的网速较快,或是觉得MID音乐有些单调,也可以添加MP3的音乐。
在Dreamweaver 中插入背景音乐的几种方法多次收到喜欢太平洋网络学院的网友的信件,信中提问如何在Dreamweaver 中插入背景音乐,现在让我一次性向大家介绍几种背景音乐的插入方法,让更多的人去掌握它。
一、直接插入法1.打开一张需要插入背景音乐的网页,在菜单中找到这样的命令:Windows - > Behaviors,调出“Behaviors”行为面板,如下图所示(Dreamweaver MX 的面板):2.点击“+”号按钮,选择“play sound”命令,如下图:如果此命令呈反白色,不可用,请在此命令下拉列表中选择“Show Even For”命令,在此子菜单里选择“IE 4.0 ”以上的版本,因为IE 4.0 以上的版本才支持此种格式的音乐插入方法。
3.此时弹出插入文件窗口,按“Browser”按钮选择音乐文件,当然是要浏览器支持的音乐文件格式(如mid、wav、AIFF、AU)4.插入之后网页里会显示一个“plugin”插件图标,但我们还需要作进一步的调整。
因为Dreamweaver 自动插入了一段控制代码,方便我们定制激活背景音乐。
但此功能不需要用到,那么就要把它删除。
代码有两段,分别如下:代码一、代码二、5.完成插入,此时的背景音乐还不能自动播放,点选插件图标,按“ctrl + F3”快捷键,调出属性面板,点击右下角的“Parameters”按钮,在弹出的窗口中进行修改,把参数“AutoStart”后面的“Value”缺省值“false”改成“true”(如下图所示),这样就达到打开页面背景音乐就响起的效果。
我们知道,音乐的播放是有时间长短的,如果希望它重复播放,可以把上图中的“Loop”参数值改成“true”。
在Dreamweaver 中插入背景音乐的几种方法多次收到喜欢太平洋网络学院的网友的信件,信中提问如何在Dreamweaver 中插入背景音乐,现在让我一次性向大家介绍几种背景音乐的插入方法,让更多的人去掌握它。
让网页随机播放多首背景音乐的方法我们都曾经遇到过,打开某一个网站首页,会听到悦耳的背景音乐!背景音乐在网页中的应用,可为打开网页的浏览者增添气氛、熏陶浏览者的情趣,同时有助于缓解上网的疲劳!那么,网页的背景音乐如何制作呢?很多时候,我们都是在网页中插入固定的背景音乐来实现的;但,这有一个致命的弱点,那就是,背景音乐单一,无论什么时候打开都是同一首,如果听得多了,也会让浏览者感觉厌倦!本文,介绍一种方法,可以让多首音乐随机在网页中播放,如此一来,不断更换新的背景音乐,不仅能增加网页修改背景音乐的灵活性,同时还给浏览者留下一个美好的印象!本文的方法是:①使用JS文件调用音乐!②音乐使用MID格式;请您遵循如下的方法即可实现!首先,准备好几首MID音乐,放到您的网站相应的目录中,如下图!注意哦,多首背景音乐的名称,最好使用1,2,3,4,5…等这样的数字序号来命名,这样才有助于随机调用!之后,我们来制作一个随机调用背景音乐的JS文件,首先打开记事本,如下图!如下图一般,输入上面的代码即可,注意拉,一个字母、一个字符都不能错,否则背景音乐就响不起来拉!之后,将上述的文件,保存成为JS文件,如下图!现在,都准备好了,下面我们在网页中调用这些背景音乐吧!如下面的代码,只要在网页的head区域中,加入如下代码即可!<script src="DataFiles/Java/BgMusic.js" type="text/jscript"></script>这样,网页就能自动随机播放不同的背景音乐了!为方便大家的学习,下面提供输入到记事本里面的JS代码:<!--var midino = Math.floor(Math.random()*6)+1var midins = ""+midinoif(navigator.appName == "Microsoft Internet Explorer"){document.write('<BGSOUND SRC="DataFiles/BgMusic/')document.write(midins)document.write('.mid" LOOP=1>')}else{document.write('<EMBED SRC="DataFiles/BgMusic/')document.write(midins)document.write('.mid" AUTOSTART=True LOOP=1>')}//-->以上的代码,涉及到网站音乐文件的路径,如DataFiles/BgMusic/,请您自行修改!此外,还涉及到音乐文件的路径,涉及到的这些,请您自己修改!另外,上述代码的var midino = Math.floor(Math.random()*6)+1,其中的这个6,指的就是您有6首背景音乐,如果您的背景音乐只有5首,请将它改为5,其他的依此类推!本方法的一个特点就是,能随机播放多首音乐,同时,以后如果要增加背景音乐的数量或减少,不用修改网页,只需要将背景音乐增加、或删除目录里面的音乐文件即可!同时保证修改好JS文件的参数即可!如果您还不太明白,就打开本网站的首页吧,是不是听到悦耳的背景音乐了呢?。
在网页中嵌入声音、多媒体在网页中添加适当多媒体、声音等,可以让网页内容更加生动,更加的吸引人。
随着宽带的高速发展,这种在网页中添加多媒体和声音的效果成为可能而且快速的实现。
在网页中添加声音有如下几种方法<bgsound>标签:利用<bgsound>标签可以在网页中添加背景音乐。
一般添加在<head>...<head>之中。
<bgsound>标签属性如下:代码示例如下:<bgsound src="url" autostart="turn" loop="-1"><embed>标签:<embed> 可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3、flash等等,Netscape及新版的IE 都能够很好的支持,可以表现出动人的网页内容。
它的具体属性与参数如下:<object>标签的使用Active控件是由软件提供商开发的可重用的软件组件。
Active控件只能在Microsoft的windows操作系统中使用。
它不但在网页中使用,还被其它的Windows应用程序使用。
它已经成为了一种软件组件。
可以利用它快速生成一个应用程序。
在HTML中,使用<object>标签引用Active控件。
当浏览器使用了Active控件的网页时。
首先检查用户的本地注册表,查看是否已经安装在本地计算机上,如果该组件已经安装本地计算机上,IE浏览器显示该网页激活该控件。
如果没有安装,哪么会按Active控件指定的地址自动下载该控件,并安装在本地计算机上后才激活该控件。
<object>具有很多的属性,下面是最常用和重要的在网页文件中使用的属性。
代码一、<BGSOUND src="音乐文件网址"loop=infinite>代码二、<DIV><OBJECT id=videowindow1 height=185 width=179 classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6><PARAM NAME="URL" VALUE="音乐文件网址"><PARAM NAME="playCount" VALUE="infinite"><PARAM NAME="autoStart" VALUE="1"><PARAM NAME="volume" VALUE="50"><PARAM NAME="uiMode"VALUE="full"><PARAM NAME="stretchToFit"VALUE="1"></OBJECT></DIV>代码说明:两种代码都可以为xx添加音乐,它们的分别在于:1、加入背景音乐,播放器不会显示在页面上;2、加入播放器,使用播放器播放背景音乐。
代码2中的以下部分可以自行替换:1、音乐文件网址可以替换上自己喜欢的音乐文件网址;2、语句<PARAM NAME="playCount" VALUE="infinite">的“infinite”可以替换为数字,表示重复播放多少次,如果不更改表示永久循环播放;3、语句<PARAM NAME="autoStart" VALUE="1">表示是否自动播放,更改为"0"时不会自动播放,"1"的时候是自动播放;4、height和width两个属性可以改变播放器的大小。
这篇文章主要介绍了为你的html5网页添加音效示例,需要的朋友可以参考下为交互添加恰当的音效,常常能改善用户体验。
在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子。
下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放器)。
其实很简单,就是利用HTML5中的audio标签,播放声音。
不过为了照顾IE 6-8,还是用上了bgsound。
兼容所有主流浏览器(非主流不在考虑之列了)闲话少说,上代码:代码如下:<a href="#" class="fui-btn">播放</a><script>/*Play sound component*//** profile: JSON, {src:'chimes.wav',altSrc:'',loop:false}** setSrc: Function, set the source of sound* play: Function, play sound*/if (!FUI){var FUI = {};}FUI.soundComponent=function(profile){this.profile={src:'',//音频文件地址altSrc:'',//备选音频文件地址(不同浏览器支持的音频格式不同,可见附表)loop:false//是否循环播放,这个参数现在没有用上};if(profile) {$.extend(this.profile,profile);}this.soundObj=null;this.isIE = !-[1,];/*这个方法是前辈大牛发明的,利用ie跟非ie中JScript处理数组最后一个逗号“,”的差异,不过对于IE 9,这个办法就无效了,但此处正合我用,因为IE 9支持audio*/this.init();};FUI.soundComponent.prototype={init:function(){this._setSrc();_setSrc:function(){if(this.soundObj){if(this.isIE){this.soundObj[0].src=this.profile.src;}else{this.soundObj[0].innerHTML='<source src="'+this.profile.src+'" /><source src="'+this.profile.altSrc+'" />';}}else{if(this.isIE){this.soundObj=$('<bgsound volume="-10000" loop="1" src="'+this.profile.src+'">').appendTo('body'); //-10000是音量的最小值。
四年级上信息技术教案给网页中加入背景音乐和动画_交大版
第三课给网页中加入背景音乐和动画
教学目标:1、能熟练地给网页中加入背景音乐。
2、会给网页中插入一段动画。
教学重点:加入背景音乐
教学难点:插入动画
教学准备:计算机、网络及辅助教学软件。
教学方法:讲解法、演示法
教学过程:
一、谈话导入
当你在网上浏览网页的时候,是不是希望能一边听着舒心的音乐,一边欣赏漂亮的网页呢?今天我们就一起来学习。
二、新授
1、加入背景音乐
①讲解示范
A、插入高级插件
B、选中“隐藏插件”
C、单击“浏览”选择音乐文件
D、单击确定
E、预览
②学生练习
2、动画
①讲解示范。
对于个人站长来说,如何能使自己的网站与众不同、充满个性,一直是不懈努力的目标。
除了尽量提高页面的视觉效果、互动功能以外,如果能在打开网页的同时,听到一曲优美动人的音乐,相信这会使你的网站增色不少。
一、学会添加音乐文件
为网页添加背景音乐的方法一般有两种,第一种是通过普通的标签来添加,另一种是通过标签来添加。
(一)使用标签
用Dreamweaver打开需要添加背景音乐的页面,点击“代码”打开代码编辑视图,在之间输入“
图1
Dreamweaver自动输入“
其中,loop="-1"表示音乐无限循环播放,如果你要设置播放次数,则改为相应的数字即可。
这种添加背景音乐的方法是最基本的方法,也是最为常用的一种方法,对于背景音乐的格式支持现在大多的主流音乐格式,如WA V、MID、MP3等。
如果要顾及到网速较低的浏览者,则可以使用MID音效作为网页的背景音乐,因为MID音乐文件小,这样在网页打开的过程中能很快加载并播放,但是MID也有不足的地方,它只能存放音乐的旋律,没有好听的和声以及唱词。
如果你的网速较快,或是觉得MID音乐有些单调,也可以添加MP3的音乐。
只要将上述代码中的happy.mid改为happy.mp3即可。
提示:在FrontPage中加入背景音乐要比Dreamweaver相对方便一些,只要在“背景”对话框中进行相关设置即可(图2)。
图2
(二)使用标签
使用标签来添加音乐的方法并不是很常见,但是它的功能非常强大,如果结合一些播放控件就可以打造出一个Web播放器。
它的使用方法与第一种基本一样,只是第一步的代码提示框里不要选择gbsound,改而选择embed即可。
然后再选择它的属性进行相应的设置(图3),从图中可看出embed的属性比gbsound 的五个属性多许多。
最后的代码如下:。
图3
其中autostart用来设置打开页面时音乐是否自动播放,而hidden设置是否隐藏媒体播放器。
因为embed实际上类似一个Web页面的音乐播放器,所以如果没有隐藏,则会显示出你系统默认的媒体插件的。
对于这两种方法,笔者认为二者之间都各有优缺点:第一种方法当页面打开时音乐播放,如果将页面最小化以后播放音乐会自动暂停,如果使用第二种方法则不会出现这种情况,只要不将窗口关闭,它会一直播放。
所以希望大家在运用过程中根据自己的情况来选择添加音乐的方法。
学会了简单的添加网页音乐方法后,就应该在界面和功能上下点功夫了。
我们可以利用《网页音乐播放器》打造一个时尚的音乐播放器。
二、打造时尚音乐播放器
学会了简单的添加网页音乐方法后,就应该在界面和功能上下点功夫了。
我们可以利用《网页音乐播放器》打造一个时尚的音乐播放器。
提示:《网页音乐播放器》是一个网页插件,运行制作好的页面后,它会调用系统自带的Windows Media播放器来播放事先设定好的MP3歌曲。
(一)简单设置
首先下载播放插件(下载地址:
,解压后进入目录,其中music.htm就是我们要在主页上加载的播放条页面,list.htm是浏览者用于查看播放列表的弹出页面,js文件夹里存放的是几个播放控制文件,img里则是一些播放界面的图片文件。
使用网页编辑软件打开music.htm,找到以下代码:
var blnAutoStart=
var blnRndPlay=
var blnStatusBar=
var blnShowV olCtrl=
var blnShowPlist=
var blnUseSmi=
var blnLoopTrk=
var blnShowMmInfo
在这里可以对播放器进行基本的设置。
以上各句依次含义是:是否自动播放,是否循序播放,是否显示状态栏,是否显示音控状态,是否允许显示播放清单,是否使用SMI模式,是否循环播放,是否显示歌曲信息。
你可以根据自己的需要对它们进行设置,其中true为“是”,false为“否”。
另外,为了使你的播放条更具个性色彩,你还可以在music.htm代码中找到......语句,将其中的主页名称修改为你自己主页的名称。
(二)添加播放列表
打开js文件夹中的
播放列表文件bglist.js,在这里就可以把你喜欢的歌曲添加到列表上来了,具体的添加格式为mkList"歌曲路径"歌曲
说明",其中“歌曲路径”可以是你上传到主机上的本地地址,也可以指定网络上的MP3地址,“歌曲说明”是用来滚动显示在播放条上的,可以是演唱者和歌曲的名称。
比如要添加周杰伦的《龙卷风》,我们先在网络上找到可以实时播放的链接地址,然后再把它添加到列表上:mkList"http://202.102.43.37/hy/yinyue/
周杰伦周杰伦——龙卷风"。
提示:为了保持你的主页音乐常听常新,我们可以间隔一段时间就对播放列表更新一次。
(三)安装播放器
为了防止点击主页链接而影响歌曲播放的连续性,我们要把播放页面music.htm以框架形式安装到主页上去。
以FrontPage2003为例,执行“新建→其他网页模板”弹出“网页模板”窗口,选择“框架网页→页脚”,“确定”后在上框架里设置初始网页指向你的主页,下框架里则指向music.htm,然后在框架属性中去掉框架边框并适当调整下框架的高度(图4),框架高度足以容纳播放条的高度即可。
预览满意后就可以保存页面了,然后把你的网站指向这个新页面就可以了。
图4。