在主页中编制音频播放器
类别: JavaScript教程
虽然Netscape和IE都支持音频文件的播放,但在制作过程中还是遇到了这样一个问题: 如果用隐藏方式播放则没有声卡的用户要出错,影响主页的整体效果。编一个既便于用户控制又能给页面起到点缀作用的音频播放器不失为一个好办法。下面详细介绍用JavaScript 自编音频播放器的方法。
1. Netscape的音频播放器
1)直接打开
Netscape支持.mid、 .wav和.au等音频文件格式,您可以在浏览器中直接打开上述文件,打开时出现如下图的播放器窗口并自动播放一次,继续播放可单击“PLAY”按钮。
2)程序调用
在主页文件中您可以嵌入如下名为MySound的音频控制台来实现隐藏方式下音频文件的自动循环播放:
<EMBED SRC=″jn.mid″//源文件名
HIDDEN=″TRUE″//隐藏方式
AUTOSTART=″TRUE″//自动播放
LOOP=″TRUE″//循环播放
NAME=″MySound″//嵌入对象名
</EMBED>
2. JavaScript的音频支持函数
通过JavaScript的音频支持函数,您可以控制任何一个嵌入在主页中的音频控制台。 JavaScript提供了如下的支持函数:
play({loop[TRUE,FALSEoranINT]},′{url-to-sound}′)//播放
pause()//暂停
stop()//停止播放当前文件
StopAll()//停止播放所有文件
start-time({numberofseconds})
//从第几秒开始
end-time({numberofseconds})
//到第几秒结束
setvol({percentagenumber-without″%″sign})
//音量百分比控制
fade-to({volumepercentyouwishtofadeto-withoutthe″%″sign})//削减音量到
fade-from-to({volumepercentstartfade},{volumepercentendfade})
//从某个音量值削减到某个音量值
start-at-beginning()//从文件头开始
stop-at-end()//到文件尾停止
下面四个是状态测试函数
IsReady()//准备状态测试
IsPlaying()//播放状态测试
IsPaused()//暂停状态测试
GetVolume()//获取当前音量值
3. 应用举例
下面是一个包含Netscape音频播放器所有五个元素的例子。考虑到有些用户没有声卡,本例中没有设置自动播放。读者可以根据自己的喜好结合鼠标事件将各个元素和测试函数都添加到图形按钮中。程序清单如下:
<HTML>
<HEAD>
<TITLE>音频播放器</TITLE>
<SCRIPTLANGUAGE=JavaScript>
<!--Writer:YuHaiHe
functionplaySound(){
document.firstSound.play(true);
}
functionpauseSound(){
document.firstSound.pause();
}
functionstopSound(){
document.firstSound.stop();
}
functionvolup(){
currentVolume=document.firstSound.GetVolume();
newVolume=(currentVolume+10);
if(document.firstSound.GetVolume()==100){
alert(″音量已经达到最大值″);
}
if(newVolume<101){
document.firstSound.setvol(newVolume); }
else
{
if((newVolume<=100)&&(newVolume>90)){
document.firstSound.setvol(100);
} }
}
functionvoldown(){
currentVolume=document.firstSound.GetVolume();
newvolume=(currentVolume-10);
if(document.firstSound.GetVolume()==0){
alert(″音量已经达到最小值″);
}
if(newVolume>0){
document.firstSound.setvol(newVolume); }
else {
if((newVolume>=0)&&(newVolume<10)){ document.firstSound.setvol(0); } } }
//EndofJavaScriptCode-->
</SCRIPT> </HEAD>
<BODY>
<EMBED SRC=″JN.MID″ HIDDEN=TRUE
AUTOSTART=″FALSE″ LOOP=″TRUE″
NAME=″firstSound″ MASTERSOUND>
<P><AHREF=″javascript:playSound()″>播放</A></P>
<P><AHREF=″javascript:pauseSound()″>暂停</A></P>
<P><AHREF=″javascript:stopSound()″>停止</A></P>
<P><AHREF=″javascript:volup()″>音量+</A></P>
<P><AHREF=″javascript:voldown()″>音量-</A></P>
</BODY> </HTML>
1. Netscape的音频播放器
1)直接打开
Netscape支持.mid、 .wav和.au等音频文件格式,您可以在浏览器中直接打开上述文件,打开时出现如下图的播放器窗口并自动播放一次,继续播放可单击“PLAY”按钮。
2)程序调用
在主页文件中您可以嵌入如下名为MySound的音频控制台来实现隐藏方式下音频文件的自动循环播放:
<EMBED SRC=″jn.mid″//源文件名
HIDDEN=″TRUE″//隐藏方式
AUTOSTART=″TRUE″//自动播放
LOOP=″TRUE″//循环播放
NAME=″MySound″//嵌入对象名
</EMBED>
2. JavaScript的音频支持函数
通过JavaScript的音频支持函数,您可以控制任何一个嵌入在主页中的音频控制台。 JavaScript提供了如下的支持函数:
play({loop[TRUE,FALSEoranINT]},′{url-to-sound}′)//播放
pause()//暂停
stop()//停止播放当前文件
StopAll()//停止播放所有文件
start-time({numberofseconds})
//从第几秒开始
end-time({numberofseconds})
//到第几秒结束
setvol({percentagenumber-without″%″sign})
//音量百分比控制
fade-to({volumepercentyouwishtofadeto-withoutthe″%″sign})//削减音量到
fade-from-to({volumepercentstartfade},{volumepercentendfade})
//从某个音量值削减到某个音量值
start-at-beginning()//从文件头开始
stop-at-end()//到文件尾停止
下面四个是状态测试函数
IsReady()//准备状态测试
IsPlaying()//播放状态测试
IsPaused()//暂停状态测试
GetVolume()//获取当前音量值
3. 应用举例
下面是一个包含Netscape音频播放器所有五个元素的例子。考虑到有些用户没有声卡,本例中没有设置自动播放。读者可以根据自己的喜好结合鼠标事件将各个元素和测试函数都添加到图形按钮中。程序清单如下:
<HTML>
<HEAD>
<TITLE>音频播放器</TITLE>
<SCRIPTLANGUAGE=JavaScript>
<!--Writer:YuHaiHe
functionplaySound(){
document.firstSound.play(true);
}
functionpauseSound(){
document.firstSound.pause();
}
functionstopSound(){
document.firstSound.stop();
}
functionvolup(){
currentVolume=document.firstSound.GetVolume();
newVolume=(currentVolume+10);
if(document.firstSound.GetVolume()==100){
alert(″音量已经达到最大值″);
}
if(newVolume<101){
document.firstSound.setvol(newVolume); }
else
{
if((newVolume<=100)&&(newVolume>90)){
document.firstSound.setvol(100);
} }
}
functionvoldown(){
currentVolume=document.firstSound.GetVolume();
newvolume=(currentVolume-10);
if(document.firstSound.GetVolume()==0){
alert(″音量已经达到最小值″);
}
if(newVolume>0){
document.firstSound.setvol(newVolume); }
else {
if((newVolume>=0)&&(newVolume<10)){ document.firstSound.setvol(0); } } }
//EndofJavaScriptCode-->
</SCRIPT> </HEAD>
<BODY>
<EMBED SRC=″JN.MID″ HIDDEN=TRUE
AUTOSTART=″FALSE″ LOOP=″TRUE″
NAME=″firstSound″ MASTERSOUND>
<P><AHREF=″javascript:playSound()″>播放</A></P>
<P><AHREF=″javascript:pauseSound()″>暂停</A></P>
<P><AHREF=″javascript:stopSound()″>停止</A></P>
<P><AHREF=″javascript:volup()″>音量+</A></P>
<P><AHREF=″javascript:voldown()″>音量-</A></P>
</BODY> </HTML>
- 上一篇: WEB页面简单进度记时器
- 下一篇: 定时打开新窗口并关闭原窗口
-= 资 源 教 程 =-
文 章 搜 索