简单的JS音乐播放

JavaScript课程设计2目录设计题目基于javascript的网页音乐播放器一、前言...............................................................................31.1课程设计思路...............................................................................................31.2课程设计目标...............................................................................................3二、关键技术...........................................................................42.1HTML相关概念............................................................................................42.2css................................................................................................................42.3javascript.........................................................................................................5三、总体设计...........................................................................63.1总体架构.......................................................................................................63.2详细方法介绍...............................................................................................6四、附录...............................................................................84.1主要代码.......................................................................................................83一、前言1.1课程设计思路随着人们生活的日益美好，音乐也逐渐走进各种人群，从小学生到工作者到农民，都会在劳累时闲暇时听听音乐舒缓自己的疲劳，各色软件播放器也应运而生，环绕着人们的生活。我设计的网页播放器可以实现不需要下载应用程序，简单容易运行，且可以移植到其他网页中成为网页音乐播放器插件，作为网页背景音乐实用，也具有播放暂停等功能。1.2课程设计目标1.能够熟练javascript，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表CSS实现多种效果。2．熟练使用javascript和css中的内建对象最终实现一个音乐播放器雏形。3.熟练使用javascript和html实现用户注册，从而提高网页访问速度。4.熟练掌握javascript事件监听等方法。4二、关键技术2.1HTML相关概念HTML的英文全称是HypertextMarkedLanguage，中文叫做“超文本标记语言”。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。一个HTML文件的后缀名是.htm或者是.html。用文本编辑器就可以编写HTML文件。HTML文件所需要的基本标签。htmlheadtitleTitleofpage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/html2.2css1.css简介CSS[1]是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持5几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css做为文件扩展名，例如Mystyles.css。2.3javascriptJavascript在网页的用法Javascript加入网页有两种方法：1、直接加入HTML文档scriptlanguage=Javascript!--document.writeln(这是Javascript！采用直接插入的方法！);//-Javascript结束--/script2、引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：scriptsrc＝urllanguage=Javascript/scriptdocument.writeln(这是Javascript！采用直接插入的方法！);在网页中可以这样调用程序：scriptsrc＝Script.jslanguage=Javascript/script。6三、总体设计3.1总体架构3.2详细方法介绍1.setInterval(shijian.innerHTML=newDate().toLocaleString();,1000);介绍：此方法调用系统时间，定义定时器使其一秒刷新一次，实现动态时间显示。2.functionsongObj(Id,url,name){}介绍：此方法用来存储歌曲的ID,URL,NAME，使其在主运行方法中更快的调用关于歌曲的信息。3.functionpauseIt(){}介绍：此方法为通过暂停按钮当事件触发后用来暂停当前播放的音乐。4.functionplayIt(){}介绍：此方法为通过播放按钮当事件触发后用来播放当前播放的音乐。播放器界面75.functionstopIt(){}介绍：此方法为通过停止按钮当事件触发后用来停止当前播放的音乐，并且进行下一曲播放。6.functionshowTimer(){}介绍：此方法用来实现显示当前歌曲播放时从时间和以播放时间的动态显示。7.functionnxtPlay(){}介绍：此方法为通过下一曲按钮当事件触发后用来进行下一曲播放。8.functionprePlay(){}介绍：此方法为通过上一曲按钮当事件触发后用来进行上一曲播放。9.functionPlayIt{}介绍：此方法为当播放列表播放完后会在动态歌名显示框中显示没有歌曲了。10.functionclearIt(){}介绍：此方法为当歌曲列表播放完时会刷新列表，从头播放。11.functionsetIt(){}介绍：此方法为党列表为空时，提示没有歌曲。请查看列表。12.functionInitPlay(songName,url,auto){}介绍：主运行方法，用来生成主体显示界面，实现歌曲播放，显示图片、按钮等。13.functionMakeList{}介绍：此方法为读取歌曲列表并存入songObj中。8四.附录4.1主要代码htmlheadmetahttp-equiv=content-typecontent=text/html;charset=utf-8/title/title/headbodystyle=background-color:#FFFscriptvarplayid=LovelyLifePlayer;varcurId,arrPL,selected;varisStop,isLoop;arrPL=newArray();cur=0;curId=0;isStop=false;selected=0;isLoop=true;setInterval(shijian.innerHTML=newDate().toLocaleString();,1000);functionsongObj(Id,url,name){this.Id=Id;this.url=url;this.name=name;}functionpauseIt(){document.getElementById(playid).controls.pause();}functionplayIt(){document.getElementById(playid).controls.play();}functionstopIt(){isStop=true;document.getElementById(playid).controls.stop();}functionshowTimer(){9varcp=document.getElementById(playid).Controls.currentPosition;varcps=document.getElementById(playid).Controls.currentPositionString;vardur=document.getElementById(playid).CurrentMedia.duration;vardurs=document.getElementById(playid).CurrentMedia.durationString;vars=document.getElementById(playid).playState;varo=document.getElementById(playid).openState;if(s==2||s==3)document.getElementById('pos').innerText=+cps+/+durs+;elsedocument.getElementById('pos').innerText=00:00/+durs+;if(s==1){if(isLoop&&(curId(arrPL.length-1))){curId=0;return0;}clearIt();if(curId0||curIdarrPL.length){alert(当前没有歌曲！，请查看播放列表！);returnfalse;}nxtPlay();}if(s==10&&arrPL.length0)nxtPlay();}functionnxtPlay(){isStop=true;if(curIdarrPL.length-1){document.getElementById(songName).innerText=没有歌曲了，请选择上一曲!;document.getElementById(playid).URL=NULL;returnfalse;}curId++;clearIt();setIt(cur