最近, 我们在教学生使用 JavaScript, 今天就带大家开发一款简单的音乐播放器. 首先, 最终效果如图所示:
首先, 我们来编写 html 界面 index.HTML, 代码如下:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <link rel="stylesheet" type="text/CSS" href="css/style.css" />
- <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8">
- </script>
- <script src="js/common.js" type="text/javascript" charset="utf-8">
- </script>
- </head>
- <body>
- <!-- 播放器 -->
- <audio id="song" autoplay="autoplay">
- </audio>
- <!-- 整体结构 -->
- <div id="boxDiv">
- <!-- 歌词展示区域 -->
- <div id="contentDiv">
- <!-- 歌词显示 -->
- <div id="lrcDiv">
- </div>
- <!-- 上部阴影 -->
- <span id="bgTopSpan">
- </span>
- <!-- 下部阴影 -->
- <span id="bgBottomSpan">
- </span>
- </div>
- <!-- 控制区域 -->
- <div id="controlDiv">
- <!-- 进度条 -->
- <div id="progressDiv">
- </div>
- <!-- 进度条圆点 -->
- <img id="pointerImg" src="img/audio/[email protected]" />
- <!-- 播放时间 -->
- <span id="playTimeSpan">
- 00:00
- </span>
- <!-- 歌曲标题 -->
- <span id="titleSpan">
- </span>
- <!-- 总时间 -->
- <span id="totalTimeSpan">
- 00:00
- </span>
- <!-- 按钮区域 -->
- <div id="buttonDiv">
- <!-- 上一首按钮 -->
- <img id="prevImg" src="img/audio/[email protected]" />
- <!-- 播放暂停按钮 -->
- <img id="playOrPauseImg" src="img/audio/[email protected]" />
- <!-- 下一首按钮 -->
- <img id="nextImg" src="img/audio/[email protected]" />
- </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/[email protected]);
- 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/[email protected]);
- }
- #bgBottomSpan{
- top: 430px;
- position: absolute;
- background-image: url(../img/audio/[email protected]);
- 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/[email protected]");
- }
- // 歌曲播放前设置
- function setup(){
- // 设置播放哪一首歌曲
- // img/audio / 红日. mp3
- audio.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("<span>"+lrcArr[i]+"</span>");
- }
- }
- });
- }
- // 播放暂停事件
- $("#playOrPauseImg").click(function(){
- // 如果播放器是暂停状态
- if(audio.paused){
- // 继续播放
- playMusic();
- }else{
- // 暂停
- audio.pause();
- // 变成播放的图片
- $("#playOrPauseImg").attr("src", "img/audio/[email protected]");
- }
- });
- // 上一首
- $("#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[i+1])){
- // 当前行歌词变红色
- $("#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;
- }
- // 格式化时间 (00:00)
- function 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;
- }
- });
图片和歌曲, 歌词请自行下载, 最后, 可以运行试试了.
来源: http://www.bubuko.com/infodetail-3068945.html