成都电子商务网站建设公司,信阳网站seo,长宁做网站价格,wordpress 音乐 插件好程序员前端分享使用JS开发简单的音乐播放器#xff0c;最近#xff0c;我们在教学生使用JavaScript#xff0c;今天就带大家开发一款简单的音乐播放器。首先#xff0c;最终效果如图所示#xff1a;首先#xff0c;我们来编写html界面index.html#xff0c;代码如下:最近我们在教学生使用JavaScript今天就带大家开发一款简单的音乐播放器。首先最终效果如图所示首先我们来编写html界面index.html代码如下:!DOCTYPE htmlhtmlheadmeta charsetutf-8 /title/titlelink relstylesheet typetext/css hrefcss/style.css/script srcjs/jquery-2.1.0.js typetext/javascript charsetutf-8/scriptscript srcjs/common.js typetext/javascript charsetutf-8/script/headbody!--播放器--audio idsong autoplayautoplay/audio!--整体结构--div idboxDiv!--歌词展示区域--div idcontentDiv!--歌词显示--div idlrcDiv/div!--上部阴影--span idbgTopSpan/span!--下部阴影--span idbgBottomSpan/span/div!--控制区域--div idcontrolDiv!--进度条--div idprogressDiv/div!--进度条圆点--img idpointerImg srcimg/audio/progress_pointer2x.png/!--播放时间--span idplayTimeSpan00:00/span!--歌曲标题--span idtitleSpan/span!--总时间--span idtotalTimeSpan00:00/span!--按钮区域--div idbuttonDiv!--上一首按钮--img idprevImg srcimg/audio/play_above_song2x.png/!--播放暂停按钮--img idplayOrPauseImg srcimg/audio/play2x.png/!--下一首按钮--img idnextImg srcimg/audio/play_next_song2x.png//div/div/div/body/html接下来编写style.css代码如下body{margin: 0px;background-color: #ccc;}#boxDiv{width: 375px;height: 568px;margin: 10px auto;position: relative;}#contentDiv{width: 375px;height: 460px;background-image: url(../img/audio/play_bg2x.png);overflow: hidden;}#lrcDiv{margin-top: 260px;}#lrcDiv span{display: block;line-height: 40px;text-align: center;color: white;font-size: 20px;}#bgTopSpan{position: absolute;display: block;width: 375px;height: 30px;top: 0px;background-image: url(../img/audio/play_top_shadow2x.png);}#bgBottomSpan{top: 430px;position: absolute;background-image: url(../img/audio/play_bottom_shadow2x.png);display: block;width: 375px;height: 30px;}#controlDiv{width: 375px;height: 180px;position: relative;background-color: white;}#progressDiv{background-color: red;height: 1.5px;width: 0px;}#pointerImg{width: 18px;height: 18px;position: absolute;top: -8.5px;left: -3px;}#playTimeSpan{display: block;position: absolute;font-size: 14px;width: 35px;top: 5px;left: 5px;}#totalTimeSpan{display: block;position: absolute;font-size: 14px;width: 35px;top: 5px;left: 335px;}#titleSpan{display: block;position: absolute;height: 30px;width: 295px;font-size: 20px;text-align: center;left: 40px;top: 5px;}#buttonDiv{margin-top: 40px;position: relative;}#prevImg{width: 40px;height: 40px;position: absolute;top: 20px;left: 60px;}#playOrPauseImg{width: 70px;height: 70px;position: absolute;top: 5px;left: 152px;}#nextImg{width: 40px;height: 40px;position: absolute;top: 20px;left: 275px;}最后编写common.js代码如下$(function(){// 歌曲列表var playList [红日, 狼的诱惑, 漂洋过海来看你];// 当前播放的歌曲序号var currentIndex 0;// 播放器的原生对象var audio $(#song)[0];// 播放时间数组var timeArr [];// 歌词数组var lrcArr [];// 调用播放前设置setup();// 播放歌曲playMusic();// 播放歌曲function playMusic(){// 播放歌曲audio.play();// 设置为暂停的图片$(#playOrPauseImg).attr(src, img/audio/pause2x.png);}// 歌曲播放前设置function setup(){// 设置播放哪一首歌曲// img/audio/红日.mp3audio.src img/audio/ playList[currentIndex] .mp3;// 设置歌曲的名字$(#titleSpan).text(playList[currentIndex]);// 设置歌词setLrc();}// 设置歌词function setLrc(){// 清空上一首的歌词$(#lrcDiv span).remove();// 清空数组timeArr [];lrcArr [];// 加载歌词文件$.get(img/audio/ playList[currentIndex] .lrc, {}, function(data){if(data){// 按行切割字符串var arr data.split(\n);// 分割歌词for (var i 0; i arr.length; i) {// 分割时间和歌词var tempArr arr[i].split(]);if (tempArr.length 1){// 添加时间和歌词到数组timeArr.push(tempArr[0]);lrcArr.push(tempArr[1]);}}// 显示歌词for (var i 0; i lrcArr.length; i) {$(#lrcDiv).append(spanlrcArr[i]/span);}}});}// 播放暂停事件$(#playOrPauseImg).click(function(){// 如果播放器是暂停状态if(audio.paused){// 继续播放playMusic();}else{// 暂停audio.pause();// 变成播放的图片$(#playOrPauseImg).attr(src, img/audio/play2x.png);}});// 上一首$(#prevImg).click(function(){// 如果是第一首那么跳到最后一首if(currentIndex 0){currentIndex playList.length - 1;}else{currentIndex--;}// 播放前设置setup();// 播放playMusic();});// 下一首$(#nextImg).click(function(){// 如果是最后一首就跳到第一首if(currentIndex playList.length - 1){currentIndex 0;}else{currentIndex;}// 播放前设置setup();// 播放playMusic();});// 监听播放器播放时间改变事件audio.addEventListener(timeupdate, function(){// 当前播放时间var currentTime audio.currentTime;// 总时间var totalTime audio.duration;// 当是数字的时候if(!isNaN(totalTime)){// 得到播放时间与总时长的比值var rate currentTime / totalTime;// 设置时间显示// 播放时间$(#playTimeSpan).text(getFormatterDate(currentTime));// 总时长$(#totalTimeSpan).text(getFormatterDate(totalTime));// 设置进度条$(#progressDiv).css(width, rate * 375 px);// 设置进度圆点$(#pointerImg).css(left, (375 - 15) * rate - 3 px);// 设置歌词的颜色和内容的滚动for (var i 0; i timeArr.length - 1; i) {if(!isNaN(getTime(timeArr[i]))){// 当前播放时间大于等于i行的时间并且小于下一行的时间if (currentTime getTime(timeArr[i]) currentTime getTime(timeArr[i1])){// 当前行歌词变红色$(#lrcDiv span:eq(i)).css(color, #FF0000);// 其他行歌词变白色$(#lrcDiv span:not(:eq(i))).css(color, #FFFFFF);// 当前行歌词滚动$(#lrcDiv).stop(false, true).animate({margin-top: 260 - 40 * i px}, 1000);}}}}});function getTime(timeStr){// 去掉左边的[var arr timeStr.split([);if(arr.length 1){// 得到右边的时间var str arr[1];// 分割分、秒var tempArr str.split(:);// 分var m parseInt(tempArr[0]);// 秒var s parseFloat(tempArr[1]);return m * 60 s;}return 0;}// 格式化时间0000function getFormatterDate(time){// 分var m parseInt(time / 60);// 秒var s parseInt(time % 60);// 补零m m 9 ? m : 0 m;s s 9 ? s : 0 s;return m : s;}});图片和歌曲、歌词请自行下载最后可以运行试试了。
