音乐网站制作之音乐播放

在做音乐网站的过程中，我就先把我写的一部分需要总结的拿出来吧！

音乐网站肯定需要有音乐，接下来我就说下在html中播放音乐：

利用html5的新特性，audio；

在对音乐播放之前我们还需要对歌词进行解析，歌词的一般的格式为：lrc格式

在管理员上传歌曲的时候我们需要预览歌词，这时候我们就需要获取本地歌词（包括本地歌词的路径）

具体获取的代码瑞安所示：

var word=[];//用于存放每句歌词
var time=[];//用于存放歌词中解析出来的时间$(".lyricUp").change(function(){//当歌词上传的时候var objUrl = this.files[0];  var fileType=getFileType($(this).val());if(fileType!="LRC"){alert("歌词格式不正确，只能上传lrc格式！");$(this).val("");//清空歌词的路径}else{if (objUrl) {  ShowFileInfo(objUrl); }}}) ;/*读取本地文件*/function ShowFileInfo(filespec){  var reader = new FileReader();var lyic=null;reader.onload = function() {  lyic=this.result; praseLyric(lyic);showLyric(); }reader.readAsText(filespec,"utf-8");}function praseLyric(lyic){/* 对歌词进行解析 */  word=[];time=[];var sp = lyic.split("[");for ( var i = 0; i < sp.length; i++) {var sp1 = sp[i].split("]");if (sp1[1] == undefined || sp1[1] == null) {word.push(" ");} else {word.push(sp1[1]);}var sp2 = sp1[0].split(":");if (sp2[0] == null || sp2[1] == null) {time.push(0);} else {if (!isNaN(sp2[0]) && !isNaN(sp2[1])) {var tmp = Math.ceil(sp2[0] * 60 + sp2[1] * 1);time.push(tmp);} else {time.push(0);}}}}/*创建子节点以及赋值*/function showLyric(){var ul = document.getElementById("music");var musicShowNode= $('#music p'); for(var i=0;i<musicShowNode.length;i++){musicShowNode.eq(i).remove();}for ( var i = 0; i < word.length; i++) {var createLi = document.createElement("p");createLi.setAttribute("id", time[i]);$("#"+time[i]+"").attr("align","center"); createLi.innerHTML = word[i];ul.appendChild(createLi);}}/*对文件名的分割*/function getFileType(fileName){var fileReg=fileName.lastIndexOf(".");return fileName.substring(fileReg+1,fileName.length).toUpperCase();}

音乐播放的制作：

audio中的属性有：

autoplay 值：autoplay 音乐就绪之后马上播放

controls 值： controls 出现该属性，立即向用户出现滚动条

loop 值：loop 出现loop，当播放完毕之后，重新播放

audio标签属于html5中的媒体标签，所以具有html5中的所有媒体事件。事件类型如下表所示。

事件	描述
canplay	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
canplaythrough	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
durationchange	当媒介长度改变时运行脚本
emptied	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
ended	当媒介已抵达结尾时运行脚本
error	当在元素加载期间发生错误时运行脚本
onloadeddata	当加载媒介数据时运行脚本
loadedmetadata	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
loadstart	当浏览器开始加载媒介数据时运行脚本
pause	当媒介数据暂停时运行脚本
play	当媒介数据将要开始播放时运行脚本
playing	当媒介数据已开始播放时运行脚本
progress	当浏览器正在取媒介数据时运行脚本
ratechange	当媒介数据的播放速率改变时运行脚本
readystatechange	当就绪状态（ready-state）改变时运行脚本
seeked	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
seeking	当媒介元素的定位属性为真且定位已开始时运行脚本
stalled	当取回媒介数据过程中（延迟）存在错误时运行脚本
suspend	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
timeupdate	当媒介改变其播放位置时运行脚本
volumechange	当媒介改变音量亦或当音量被设置为静音时运行脚本
waiting	当媒介已停止播放但打算继续播放时运行脚本

audio标签的方法

html5中的媒体标签所提供的方法很简单，如下。

p.load();
p.play();
p.pause();
p.stop();

获取歌曲的总的播放时间：

audio.duration

audio.currentTime = 20; //跳转快进

具体的代码如下：

$(".songUp").change(function(){//当歌曲上传的时候 var fileName=$(this).val();var fileType=getFileType(fileName);alert(fileType);if(fileType!="MP3"){alert("文件格式不正确！");$(this).val("");//清空文件的地址}else{var objUrl = getObjectURL(this.files[0]) ;console.log("objUrl = "+objUrl) ;if (objUrl) {$(".audioPlay").attr("src", objUrl) ;}}}) ;/*音乐播放时间改变出发的事件*/audios.addEventListener("timeupdate", function() {var times = audios.currentTime;var tmp = 0;var st = parseInt(times);for ( var i = tmp; i < st; i++) {$("#" + st).addClass("musicFont");$("#" + st).addClass("musicFont");$(".showLyric").scrollTop(times * 10); }tmp = st;}, true);audios.addEventListener("play", function() {//当音乐播放时发生的事件showLyric(); });/*播放音乐*/function play(){ audios.play();}/*停止播放音乐*/function stop(){ audios.stop();}

音乐网站制作之音乐播放相关推荐

音乐网站开发建设定制，手机版DJ音乐网站制作
专业定制DJ音乐网站,在线音乐播放网站源码开发建设‌‌ 模仿qq音乐网站,虾米音乐网站,网易云音乐网站,酷我音乐网站,酷狗音乐网站开发定制等. 承接dj音乐站搭建一条龙服务. 本公司专业定制,网站开 ...
React + Vite 实现一个音乐网站（aplayer音乐播放器）
众所周知,音乐网站需要能播放音乐 1.页面搭建我们需要搭建这样一个部分那么秉承一分为二的原则,左边音乐列表,右边显示cd图片.理所应当我们得让cd运动起来. components里面建立文件夹Mu ...
php音乐网站论文,PHP音乐交流论坛的设计与实现毕业设计
PHP音乐交流论坛的设计与实现毕业设计毕业设计毕业设计论文论文音乐交流论坛的设计与实现目目题题 1.1.指导教师评语指导教师评语签名年月日摘要本系统采用 PHP 语言,在 Wi ...
javweb音乐网站_jsp在线音乐试听网站html5
人民在利用网络学习的同时,也在享受着网络带来的各种附带产品所产生的效应,如网络游戏,网络歌曲.在线音乐试听网正是在这样的需求前提下应运而生.给人们的日常生活带来了极大的乐趣,让人们在繁忙疲惫的工作之后 ...
分享Html模板5合一模板---50电影模板、56个游、86个体育项目、95个音乐网站、116个时尚
模板下载链接:https://pan.baidu.com/s/1zNvc5K8tpWbxAKuIziGgjg 密码:agk4 50电影模板Html模板! 56个游戏Html模板 86个体育项目Htm ...
在线音乐网站的设计和搭建
在线音乐网站的设计和搭建目录粒子音乐的设计和搭建文章目录前言一.应用技术二.需求分析三.功能分析四.页面展示 4.1 首页布局 4.2 歌单列表 4.3 专辑列表 4.4 歌手列表 4 ...
怎样去设计一个音乐网站
有没有设计过音乐网站的朋友? 分享一下经验..或者音乐网站是否具备音乐版权问题.
网站制作开发的步骤和方法
无论是开发软件还是创建网站,真正困扰我们的往往并非软件的使用问题,而是软件技术之外的一些东西,真正决定一个网站是否成功的要素是设计.定位.推广等非技术手段. 一.整理规划. 网站建设的开始就应该有一个 ...
HTML5期末大作业：音乐网站设计——风车乐栈在线音乐播放HTML+CSS
HTML5期末大作业:音乐网站设计--风车乐栈在线音乐播放HTML+CSS 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
给网站添加悬浮音乐播放器
给网站添加悬浮音乐特效效果图网站源文件中(如果有单独的页脚文件,也可以放在页脚文件里面)添加这三行代码:  <script src="https ...

音乐网站制作之音乐播放

音乐网站制作之音乐播放相关推荐

最新文章

热门文章