tceic.com
学霸学习网 这下你爽了
赞助商链接
当前位置:首页 >> 计算机软件及应用 >>

菜鸟应用JAVASCRIPT 之 简易网页音乐播放程序


菜鸟应用 JAVASCRIPT 之 简易网页音乐播放程序
—— 编程之星 2007-8-30
大家好,已经有一段时间没有在论坛发贴了.以前我在论坛发表一张贴—《菜鸟应用 JAVASCRIPT 之 图片浏览器》.虽然没有人给我回贴,但人气还算是不错的,而且还让管理员 给加精了,在此要向管理员表示谢意. 精 那么今天我们来学习一下网页音乐播放程序的原理,这应该是大家,特别是初学者比较感兴 趣的话题.我写的这个程序功能并不全面,而且界面也不美观,但这张贴旨在讨论一下其中的 原理,所以就请大家将就一下啦.大家还可以在此基础上写出一个功能全面的网页播放程序出 来.这个程序运行的前提是—电脑上安装了 Windows Media Player. 要想实现网页音乐播放的效果,就应该对插件(Windows Media Player 或 Real Player)的属性 和方法有一些了解.这里,我们只讨论一些本程序涉及到的 Windows Media Player 插件的一些 属性和方法. Windows Media Player 的属性 属性名 URL uiMode enableContextMenu controls 方法名 play() pause() stop() 程序效果截图: 属性值 歌曲的地址 None 或 Mini 或 Full True 或 False 作用 设置或返回播放插件播放的歌曲文件地址 设置播放插件是否显示控制条等 设置播放插件是否显示右键菜单 播放插件的一个集合属性,用来控制播放等 Windows Media Player 属性 controls 集合的方法 集合的方法 作用 播放歌曲 暂停歌曲 停止歌曲

把程序的完整源代码给大家.然后大家只要看代码中的注释应该就能理解的啦.如果还不理 解的话,那么就看我的解释,文字可能欠准确和流畅,请包涵. <html> <head> <script> //打开就播放 function loadPlay() { try{ setColor(0); document.WMP.URL=MusicList.options[0].value; //指定(播放)列表中的第一首歌曲 document.WMP.controls.play(); //播放 }catch(e){} //try{}catch(e){}表示忽略程序运行中出现的错误

} //以下函数获取当前播放歌曲在列表中的索引 function getMusicIndex() { try{ var MusicIndex=0; //存储当前播放歌曲的位置 /* 遍历整个播放列表. 获取当前播放歌曲在列表中的下标位置 用 document.WMP.URL 来和列表项的值比较 */ for(i=0;i<MusicList.length;i++) { if(document.WMP.URL==document.all.MusicList.options[i].value) { MusicIndex=i; //记录下当前播放歌曲的位置 break; } } return MusicIndex; //整个函数返回当前播放歌曲的下标位置 }catch(e){} setTimeout('getMusicIndex()',1000); //每隔 1 秒就检测一下当前播放歌曲的位置 } getMusicIndex(); //调用 getMusicIndex()函数 //设置当前播放与不播放的歌曲的颜色 function setColor(me) { for(i=0;i<MusicList.length;i++) { MusicList.options[i].style.color="purple"; if(i==me) { MusicList.options[i].style.color="green"; continue; } } } //播放上一曲 function playPrevious() { try{ var PlayIndex=getMusicIndex(); //将当前播放歌曲的位置存储到 PlayIndex 变量中

PlayIndex--; //当前播放歌曲的位置-1 就表示起上一曲的位置 setColor(PlayIndex); document.WMP.URL=MusicList.options[PlayIndex].value; document.WMP.controls.play(); }catch(e){} } //播放下一曲 function playNext() { try{ var PlayIndex=getMusicIndex(); //将当前播放歌曲的位置存储到 PlayIndex 变量中 PlayIndex++; //当前播放歌曲的位置+1 就表示起下一曲的位置 setColor(PlayIndex); document.WMP.URL=MusicList.options[PlayIndex].value; document.WMP.controls.play(); }catch(e){} } //控制播放,暂停,停止 function control(me) { switch (me) { case 1 : //暂停 document.WMP.controls.pause(); break; case 2 : //播放 document.WMP.controls.play(); break; case 0 : //停止 document.WMP.controls.stop(); break; } } </script> </head> <body onload="loadPlay()"> <object id="WMP" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="232" height="200" loop=-1> <param name="URL"> <param name="uiMode" value="none"><!-- none,mini,full --> <param name="enableContextMenu" value="false"> </object> <br> <button onclick="control(2)">播放</button>

<button onclick="control(1)">暂停</button> <button onclick="control(0)">停止</button> <button onclick="playPrevious()">上一曲</button> <button onclick="playNext()">下一曲</button> <br> <select id="MusicList" multiple> <option value="D:\music\MTV\罗志祥-爱转角.wmv">爱转角 <option value="D:\music\MTV\周杰伦_双截棍.wmv">双截棍 <option value="D:\music\MTV\潘玮柏_街头诗人.wmv">街头诗人 </select> <p> </body> </html> 本程序中共有 6 个函数.接下来我试着向大家一个个的分析这些函数. 1.loadPlay()函数分析: 我们先看看第 1 个函数 loadPlay(),这个函数表示,一打开网页就播放插件就播放列表中的第 一首歌曲.我们可以可以看到函数内部有这样的语句 try{}catch(e){},这语句是 Javascript 中捕 获错误的语句,这里用这个语句的原因是,如果函数内部用错误,那么就忽略其运行错误.我们 再来看这一句 setColor(0);这表示调用另外一个函数,后面我们会详解这个函数.再看看 document.WMP.URL=MusicList.options[0].value;这个语句表示将列表中的第 1 项的值赋予给 播放插件的 URL 属性用作播放插件的播放文件地址,因为列表中各项的值都是一些歌曲的文 件地址.接着,我们看到 document.WMP.controls.play();这语句进行播放操作,因为在上一个语 句中我们已经给播放插件指定播放文件的地址了,所以我们就要用到播放插件的集合属性 controls 的 play()方法来进行播放歌曲. 2. getMusicIndex()函数分析: 这个函数表示, 获取当前播放歌曲在列表中的索引.本程序获取播放歌曲索引的目的就是 用来进行播放上一曲和下一曲的操作.我们首先声音一个变量 MusicIndex,这个变量属于局部 变量,用来存储当前播放歌曲的位置(列表中的项目下标索引).当然我们可以声音一个全局变 量来存储,但如果能用局部变量解决问题的话,尽量不要使用全局变量,这是一个好的建议(我 在某些地方看到的,嘿嘿).为了取得当前播放歌曲在列表中的下标位置,我们需要遍历整个播 放列表,然后用播放插件的 URL 属性和列表中各项的值(value 属性值)作比较,如果两个一致 的话,那么就提取出该项在播放列表中的下标位置,这样我们就要用到 for(i=0;i<MusicList.length;i++){…}循环来遍历啦,在这个 for 循环的内部,我们用了 if 语句来判 断是否符合要求,如果符合了就将当前播放歌曲的位置存储到 MusicIndex 变量中,然后就退出 for 循环.接下来,我们可以看到 return MusicIndex;这个语句表明 getMusicIndex()函数返回一个 值,这个值就是 MusicIndex 局部变量的值. 3. setColor(me)函数分析: 这个函数表示,设置当前播放与不播放的歌曲的颜色,这样就能够很清楚的知道正在播放那 一首歌曲啦.这函数有一个参数 me,这个参数是跟当前播放歌曲的下标有关的.我们首先用一 个 for 循 环 来 遍 历 整 个 播 放 列 表 , 在 for 循 环 的 内 部 可 以 看 到 这 样 的 一 个 语 句 : MusicList.options[i].style.color="purple";,这表示将列表中的各项的文字颜色设置成紫色.接下 来就用一个 if 语句块啦,我们开看看 if 块中的条件语句 i==me,这表示,如果某个列表中的项的 下 标 位 置 和 函 数 的 参 数 me 一 致 的 话 , 那 么 就 将 该 项 的 文 本 颜 色 设 置 成 绿 色 ( 执 行 MusicList.options[i].style.color="green";)并且开始进入下半轮的循环(执行 continue;并不是重

新开始循环!)continue 语句就在循环中的作用就好像你在路上走路时遇到的一个石头,当遇到 这个石头的时候,你就跨过它,继续往下走 (这是我个人的愚蠢的理解,专供像我们这些 IQ 的 人用来记忆理解的,大家也可以不用这么理解,嘿嘿). 4. playPrevious()函数分析: 这个函数表示,用来播放上一首歌曲.我们先看 var PlayIndex=getMusicIndex();这表示将 getMusicIndex()函 数 的 返回 值 (当 前播 放 的歌 曲的位 置 )赋 值给 PlayIndex 变 量 . 再看 看 PlayIndex--;这语句表示 PlayIndex 的变量值减去 1,这样一来, PlayIndex 的值就是当前播放歌 曲的上一首歌曲的下标位置了,接下来再看, setColor(PlayIndex);这表示调用 setColor(me)函数 来设置指定项的文本颜色,不要忘了 PlayIndex 作为 setColor(me)函数的实际参数.下面两句不 用再解释了吧,如果还不十分理解的话,请参考前面的解释. 5. playNext()函数分析: 请参考 playPrevious()函数分析,两者的主要也是唯一的差别就是加减号的使用. 6. control(me)函数分析: 这个函数表示,用来进行播放插件的控制操作,如播放,暂停,停止.我们可以看到该函数内部 只有 switch 结构块, switch 结构块的条件表达式是采用该函数的形式参数 me.接下来,我们来 看 case 1 , 这 表 示 , 如 果 如 果 me 和 1 匹 配 的 话 , 那 么 就 暂 停 播 放 ( 执 行 document.WMP.controls.pause();语句),break;表示退出 switch 结构块.依此类推,下面的不用解 释了吧! 我们在来看看 HTML 代码中的一句: <object id="WMP" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="232" height="200" loop=-1>, 大 家 注 意 <object> 标 记 的 classid 属 性 值 了 ! clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 表示在网页中加载 Windows Media Player 插件,这是至关重要的! 好啦,解释完毕啦,大家可以放松心情啦,改天记得要写一个很棒的播放程序出来哦.



推荐相关:
网站首页 | 网站地图
All rights reserved Powered by 学霸学习网 www.tceic.com
copyright ©right 2010-2021。
文档资料库内容来自网络,如有侵犯请联系客服。zhit325@126.com