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 插件,这是至关重要的! 好啦,解释完毕啦,大家可以放松心情啦,改天记得要写一个很棒的播放程序出来哦.


推荐相关:

打造属于自己的音乐播放器 HTML5之audio标签.doc

打造属于自己的音乐播放器 HTML5 audio 标签最近...相关文档:Audio MDN Audio 菜鸟教程 对于这个元素...javascript"> var dom=document.getElementById("...

html5应用程序缓存菜鸟教程.doc

网页 新闻 贴吧 知道 音乐 图片 视频 地图 文库 |...HTML5 应用程序缓存 菜鸟教程 HTML5 应用程序缓存 ...如果您编辑了 一幅图片,或者修改了一个 JavaScript ...

菜鸟javascript实例.doc

网页 新闻 贴吧 知道 音乐 图片 视频 地图 文库 |...菜鸟javascript 实例.txt 始终相信,这世间,相爱的...数组简单应用的例子: var famname = new Array...

菜鸟的华丽逆袭:程序员必备的十个神器.doc

菜鸟的华丽逆袭:程序员必备的十个神器_计算机软件及...可 以生成包括简单的强类型集合和完整应用程序在内...即通过收藏夹里的一段 JavaScript 代码将网页里的信息...

JavaScript入门教程(初学者不可多得的优秀入门教材_通....doc

实现简单方 便,入门简单,即使是程序设计新手也可以 ...Javascript 在网络上应用广泛,几 乎所有的动态网页里...JavaScript"> <!-document.write("我是菜鸟我怕谁...

JAVASCRIPT入门教程(初学者不可多得的优秀入门教材 通....pdf

Javascript 在网络上应用广泛, 几乎所有的动态网页里...脚 本语言简单理解就是在客户端的浏览器就可以互动...("我是菜鸟我怕谁!"); JavaScript 使用 document...

七步从AngularJS菜鸟到专家(6):服务_教育指南_百度教育攻略.pdf

这是"AngularJS 七步从菜鸟到专家"系列的第六篇...services,整理我们的代码并完成我们的音频播放器应用...window.document元素(所有html页面javascript的根对象...

javascript菜鸟笔记.pdf

插入网页的方法使用标签在网页中插入 Javascript...对不支持?JavaScript?的浏览器隐藏代码有些浏览器...菜鸟应用JAVASCRIPT ... 5页 免费 R语言...

javascript 菜鸟到老鸟_图文.ppt

网页 新闻 贴吧 知道 音乐 图片 视频 地图 文库 |...javascript 菜鸟到老鸟_IT/计算机_专业资料。这是...的JavaScript 与XML技术),是一种广泛应用在浏览器的...

JavaScript部分教案.doc

网页 新闻 贴吧 知道 音乐 图片 视频 地图 文库 |...JavaScript部分教案_计算机软件应用_IT/计算机_专业...-document.write("我是菜鸟我怕谁!"); //--> ...

JAVASCRIPT入门.pdf

简单的说。首先,入门级别的 Javascript 可以让你的网页动起来,可以做网页特效。...("我是菜鸟我怕谁!"); 就是一个 JavaScript 语句,它可以告诉浏览器做出一个...

JAVASCRIPT基础教程.pdf

入门 javascript 有什么用处?简单的说。首先,入门...过它最主流的应用还是在 Web 上创建动态网页(... /* 谁说菜鸟不会编程? 菜鸟不但会编程 还有书写...

JavaScrip教程.doc

过它最主流的应用还是在 Web 上创建动态网页(...-- -->里的内容对于不支持 JavaScript 的浏览器来... /* 谁说菜鸟不会编程? 菜鸟不但会编程 还有书写...

七步从AngularJS菜鸟到专家(7):Routing_教育指南_百度教育攻略.pdf

这是"AngularJS 七步从菜鸟到专家"系列的第七篇...应用不会再去请求这个模板页面,因为$templateCache...json 过滤器接收JSON或者JavaScript对象,然后转换成字符...

网页概念.doc

网页概念_计算机软件应用_IT/计算机_专业资料。对...五、脚本,通常是爪哇脚本(JavaScript) ,提供交互性...设计师速成笔者曾经是一个网页设计的菜鸟, 经过自己...

网络菜鸟如何制作个人主页,建立个人网站.doc

网络菜鸟如何制作个人主页,建立个人网站_互联网_IT/...因为他们所用到 的技术较为简单,可用网页制作软件...网上还有许多免费的 Javascript 等可供使用,与图片一...

JavaScript上机练习.doc

登录注册新闻网页贴吧知道音乐图片视频地图百科文库 搜...JavaScript上机练习_计算机软件应用_IT/计算机_专业...} 简易购物车 ...

菜鸟拿站简单过程.doc

菜鸟入侵网站后台数据库简单过程第一步:随便打开一个浏览器, 1. 百度或 google...javascript:alert(document.cookie="adminuser="+escape("'or'='or'"));...

js基础教程_计算机软件及应用_IT/计算机_专业资料.pdf

将会输出在网页上输出: 我是菜鸟我怕谁! 学过编程...-- -->里的内容对于不支持 JavaScript 的浏览器来...编程语言里都有的功能,它使得程序具有简单的判断能力...

网站制作软件有哪些.doc

网站制作软件包括:一、菜鸟网页制作软件 如果你是...作网页,你能真正体会到“功能强大,简单易用”的...代码编辑的软件包, 并支持 ActiveX、 JavaScript、...

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