JavaScript技术漫谈——音乐播放器制作
2009-06-27 14:50 .金楽. 阅读(1172) 评论(2) 编辑 收藏 举报对于制作网页来说，我们不但要把网页效果制作的美观能对浏览着有吸引眼球的效果，而且系在的网站还加如了背景音乐的效果，或者是播放列表的效果，就像HI百度空间、163邮箱里的音乐播放器一样，它不但能让用户在使用时有一种舒适的感觉而且更人性化的动态了网站。那下面我们就来学习一下如何制作网页上的播放列表的方法。（是建立在本机有播放工具来说）
首先按照JavaScript的编程过程一样，先申明语言方式<script language=”javascript”></script>
在其中声明一个函数，给函数起名，function Mycheck （参数）{} 这个函数用来活的选项中的某首音乐的，括号中传的就是音乐文件的value 值，函数可以写成这样
Function Mycheck (sml)
{
ggg=window.open(sml,"ming","toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizeable=no,copyhistory=no,width=200,height=30")
}
通过函数中的代码不难看出，该函数打开的是一个模式窗口 而sml 就是我们要穿的参数。下面我们在<body>中添加代码。我们先写一个<form> 表单，给表单起名叫form1 接下来我们就要写下拉列表框了，我们想吧代码写下来让大家看看
<SELECT NAME="list">
<option value="1.mid">1.mid</option>
<option value="2.mid">2.mid</option>
<option value="3.mid">3.mid</option>
<option value="conon.mp3">conon.mp3</option>
</SELECT>
主义的是在每个选项中的value 值都要和你要播放的音乐文件名要相同而且要写上音乐文件的播放格式一面找不到，还有就是一定要放在一个文件夹下，该效果能支持很多种音乐模式。（.mp3 , .wma , .mid 等）
然后我们在下面写一个按钮用来播放音乐和调用函数的。
<INPUTTYPE=BUTTON VALUE="播放MIDI音乐" onClick="Mycheck(form1.list.options[form1.list.selectedIndex].value)">
() 种的一段代码就是传的参数，是用来将类表中的索引加载列表中的固定的值来加载的，咱们可以分开说 form1.list.selectedIndex 这个就是查询到我点击的那个文件在下拉列表中的下标是多少，而 form1.list.options[form1.list.selectedIndex].value 就是查询到这个对应下标的下拉列表的值是什么，然后传到上面的那个函数里。
我们将整个代码写清楚一点加上我运行的图片大家可能会更明白一点
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MIDI音乐选择</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Mycheck(sml)
{
ggg=window.open(sml,"ming","toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizeable=no,copyhistory=no,width=200,height=30")
}
//-->
</SCRIPT>
<FORM NAME="form1">
<SELECT NAME="list">
<option value="1.mid">1.mid</option>
<option value="2.mid">2.mid</option>
<option value="3.mid">3.mid</option>
<option value="conon.mp3">conon.mp3</option>
</SELECT>
<P><INPUT TYPE=BUTTON VALUE="播放MIDI音乐" onClick="Mycheck(form1.list.options[form1.list.selectedIndex].value)">
</FORM>
</body>
</html>
好了这个音乐播放器我们就做完了，我们可以将我们做的这个效果加载自己的网页上这样就可以加强我们网页的效果，好了我们还有更多的效果将在下面的课程中讲解希望大家关注
