当前位置：首页 > 网页设计中利用JS控制网页音乐的代码实例

网页设计中利用JS控制网页音乐的代码实例

点击次数:1653  更新日期:2011-01-05
\n

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> 在网页中插入音乐</TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=”">
<META NAME=”Keywords” CONTENT=”">
<META NAME=”Description” CONTENT=”">
<script language=jscript>

function runCode(obj) //定义一个运行代码的函数，


\n

{
var code=obj.value;//即要运行的代码。
var newwin=window.open(”,”,”); //打开一个窗口并赋给变量newwin。
newwin.opener = null // 防止代码对论谈页面修改
newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
newwin.document.close();
//newwin.close();
}
</script>


\n

</script>
</HEAD>


\n

<BODY topmargin=0>
<bgsound id=’bgsnd’ src=”" autostart=false >
<table border=”1″ width=”100%” id=”table1″>
<tr>
<td>可以在网页中插入音乐播放器:</td>
<td><textarea cols=”99″ rows=”11″ name=”em” tabindex=”1″>
<html>
<body>
<embed src=”yssa.mp3″ width=200 height=50 type=audio/mpeg loop=”true” autostart=”true”> </embed>
支持的音乐格式： wma、mp3、rm、ra、ram、asf，尽量选用可连接性高的音乐链接，保证音乐可以顺利播放； <br>
width和height表示播放器宽度和高度，可以灵活设置； <br>
autostart=”true”表示自动播放，<br>
autostart=”false”表示不自动播放；<br>
loop=”true”表示连续循环播放，<br>
loop=”false”表示不循环播放； loop也可以设为一个整数，比如loop=”3″，表示音乐循环播放3次；
</body>
</html></textarea></td>
</tr>
<tr>
<td>　</td>
<td>


\n

<p><input type=”button” value=”运行代码” name=”B3″ onclick=”runCode(document.all.em);”></p></td>
</tr>
<tr>
<td>可以在网页中插入音乐播放器:</td>
<td><textarea cols=”99″ rows=”11″ name=”emb” tabindex=”2″><html>
<body bgproperties=”fixed” bgcolor=”#000000″>
<OBJECT classid=CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95 codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,05,0809 height=256 id=NSOPlay type=application/x-oleobject width=245 standby=”Connecting with Live Event. Please wait patiently…”>
<PARAM NAME=”AudioStream” VALUE=”-1″>
<PARAM NAME=”AutoSize” VALUE=”-1″>
<PARAM NAME=”AutoStart” VALUE=”-1″>
<PARAM NAME=”AnimationAtStart” VALUE=”-1″>
<PARAM NAME=”AllowScan” VALUE=”-1″>
<PARAM NAME=”AllowChangeDisplaySize” VALUE=”-1″>
<PARAM NAME=”AutoRewind” VALUE=”-1″>
<PARAM NAME=”Balance” VALUE=”-1″>
<PARAM NAME=”BaseURL” VALUE=”">
<PARAM NAME=”BufferingTime” VALUE=”5″>
<PARAM NAME=”CaptioningID” VALUE=”-1″>
<PARAM NAME=”ClickToPlay” VALUE=”-1″>
<PARAM NAME=”CursorType” VALUE=”-1″>
<PARAM NAME=”CurrentPosition” VALUE=”-1″>
<PARAM NAME=”CurrentMarker” VALUE=”-1″>
<PARAM NAME=”DefaultFrame” VALUE=”content”>
<PARAM NAME=”DisplayBackColor” VALUE=”0″>
<PARAM NAME=”DisplayForeColor” VALUE=”16777215″>
<PARAM NAME=”DisplayMode” VALUE=”0″>
<PARAM NAME=”DisplaySize” VALUE=”4″>
<PARAM NAME=”Enabled” VALUE=”-1″>
<PARAM NAME=”EnableContextMenu” VALUE=”-1″>
<PARAM NAME=”EnablePositionControls” VALUE=”-1″>
<PARAM NAME=”EnableFullScreenControls” VALUE=”-1″>
<PARAM NAME=”EnableTracker” VALUE=”-1″>
<PARAM NAME=”Filename” VALUE=”yssa.mp3″>
<PARAM NAME=”InvokeURLs” VALUE=”-1″>
<PARAM NAME=”Language” VALUE=”-1″>
<PARAM NAME=”Mute” VALUE=”0″>
<PARAM NAME=”PlayCount” VALUE=”-1″>
<PARAM NAME=”PreviewMode” VALUE=”0″>
<PARAM NAME=”Rate” VALUE=”1″>
<PARAM NAME=”SAMILang” VALUE=”">
<PARAM NAME=”SAMIStyle” VALUE=”">
<PARAM NAME=”SAMIFileName” VALUE=”">
<PARAM NAME=”SelectionStart” VALUE=”-1″>
<PARAM NAME=”SelectionEnd” VALUE=”-1″>
<PARAM NAME=”SendOpenStateChangeEvents” VALUE=”-1″>
<PARAM NAME=”SendWarningEvents” VALUE=”-1″>
<PARAM NAME=”SendErrorEvents” VALUE=”-1″>
<PARAM NAME=”SendKeyboardEvents” VALUE=”0″>
<PARAM NAME=”SendMouseClickEvents” VALUE=”-1″>
<PARAM NAME=”SendMouseMoveEvents” VALUE=”-1″>
<PARAM NAME=”SendPlayStateChangeEvents” VALUE=”-1″>
<PARAM NAME=”ShowCaptioning” VALUE=”0″>
<PARAM NAME=”ShowControls” VALUE=”-1″>
<PARAM NAME=”ShowAudioControls” VALUE=”-1″>
<PARAM NAME=”ShowDisplay” VALUE=”-1″>
<PARAM NAME=”ShowGotoBar” VALUE=”0″>
<PARAM NAME=”ShowPositionControls” VALUE=”-1″>
<PARAM NAME=”ShowStatusBar” VALUE=”-1″>
<PARAM NAME=”ShowTracker” VALUE=”-1″>
<PARAM NAME=”TransparentAtStart” VALUE=”-1″>
<PARAM NAME=”VideoBorderWidth” VALUE=”0″>
<PARAM NAME=”VideoBorderColor” VALUE=”0″>
<PARAM NAME=”VideoBorder3D” VALUE=”0″>
<PARAM NAME=”Volume” VALUE=”-450″>
<PARAM NAME=”WindowlessVideo” VALUE=”0″>
<EMBED type=”video/x-ms-asf-plugin” pluginspage=”http://www.microsoft.com/goto/mscom/windows/mediaplayer/default.asp” filename=”yssa.mp3″
name=”NSOPlay”
width=”286″
height=”172″
DefaultFrame=”content”
AnimationAtStart=”-1″
AutoRewind=”-1″
AutoStart=”-1″
Autosize=”-1″
ControlType=”-1″
DisplaySize=”6″
ShowAudioControls=”-1″
ShowControls=”-1″
ShowDisplay=”-1″
ShowGotoBar=”-1″
ShowPositionControls=”-1″
ShowStatusBar=”-1″
ShowTracker=”-1″
TransparentAtStart=”-1″>
</EMBED>
</OBJECT>
<br/>
<input onclick=”document.all.NSOPlay.pause()” type=button value=”停止”>
<input onclick=”document.all.NSOPlay.play()” type=button value=”播放”>
<input onclick=”document.all.NSOPlay.ShowStatusBar=’0′” type=button value=”没有状态栏”>
<input onclick=”document.all.NSOPlay.Volume=’-1000′” type=button value=”减小声音”>
<input onclick=”document.all.NSOPlay.Volume=’0′” type=button value=”增大声音”>
<input onclick=”document.all.NSOPlay.Stop();document.all.NSOPlay.CurrentPosition=0;document.all.NSOPlay.play()” type=button value=”回放”>
<input onclick=”document.all.NSOPlay.Previous()” type=button value=”上一首”>
<input onclick=”document.all.NSOPlay.Next()” type=button value=”下一首”>
<input onclick=”document.all.NSOPlay.FastForward()” type=button value=”快进”>
</body>
</html>
</textarea></td>
</tr>
<tr>
<td>　</td>
<td>
<p><input type=”button” value=”运行代码” name=”B3″ onclick=”runCode(document.all.emb);”></p></td>
</tr>
<tr>
<td>可以在网页中控制背景音乐:</td>
<td><textarea cols=”99″ rows=”11″ name=”bg” tabindex=”3″><html>
<body>
<bgsound src=”a.mp3″ loop=-1>
“BGSOUND” 是用来插入背景音乐，但只适用于 IE，其参数设定不多。如下
　　<pre><BGSOUND src=”your.mid” autostart=true loop=infinite> </pre>
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=”分:秒”
设定歌曲开始播放的时间。如 STARTTIME=”00:30″ 表示从第30秒处开始播放。
VOLUME=”0-100″
设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定。
WIDTH=”整数” 和 HIGH=”整数”
设定控制面板的高度和宽度。(若 HIDDEN=”no”)
ALIGN=”center”
设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom
CONTROLS=”smallconsole”
设定控制面板的外观。预设值是 console。
console 一般正常面板 　　
smallconsole 较小的面板 　　
playbutton 只显示播放按钮 　　
pausecutton 只显示暂停按钮 　　
stopbutton 只显示停止按钮 　　
volumelever 只显示音量调节按
</pre>
</body>
</html></textarea></td>
</tr>
<tr>
<td>　</td>
<td>
<p><input type=”button” value=”运行代码” name=”B7″ onclick=”runCode(document.all.bg);”><input type=”button” value=”播放背景音乐” name=”B6″ onclick=”document.all.bgsnd.src=document.all.D1.value”><select size=”1″ name=”D1″>
<option selected value=”a.mp3″>第一首歌</option>
<option value=”yssa.mp3″>第二首歌</option>
</select><input type=”button” value=”停止背景音乐” name=”B5″ onclick=”document.all.bgsnd.src=””></p></td></tr>
</table>
</BODY>
</HTML>

\n