整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          使用JS開發簡單的音樂播放器

          近,我們在教學生使用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/progress_pointer@2x.png"/>

          <!--播放時間-->

          <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/play_above_song@2x.png"/>

          <!--播放暫停按鈕-->

          <img id="playOrPauseImg" src="img/audio/play@2x.png"/>

          <!--下一首按鈕-->

          <img id="nextImg" src="img/audio/play_next_song@2x.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_bg@2x.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_shadow@2x.png);

          }

          #bgBottomSpan{

          top: 430px;

          position: absolute;

          background-image: url(../img/audio/play_bottom_shadow@2x.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/pause@2x.png");

          }

          // 歌曲播放前設置

          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/play@2x.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[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;

          }

          });

          圖片和歌曲、歌詞請自行下載,最后,可以運行試試了。是不是很有趣呢?想要學習更多的Java技術開發知識,關注“重慶千鋒”獲取更多的視頻教程,千鋒重慶IT培訓機構還提供兩周免費試聽課程,歡迎各位小伙伴申請試聽。

          家好,今天給大家介紹一款, 網頁響應鼠標滾動特效代碼html前端源碼(圖1)。送給大家哦,獲取方式在本文末尾。

          圖1

          每滾動向下一次鼠標,文字和圖片都會發生變化,類似一些數碼產品新品發布網頁的效果,看起來非常酷炫(圖2)

          圖2

          向上滾動鼠標,圖片和文字就會還原(圖3)

          圖3

          源碼完整,需要的朋友可以下載學習(圖4)

          圖4

          本源碼編碼:10180,需要的朋友,點擊下面的鏈接后,搜索10180,即可獲取。

          就愛UI - 分享UI設計的點點滴滴

          用css3寫了個滾動特效,可以向左滾動、向右滾動,方向自由控制,沒用JavaScript或者jQuery純css3寫的,鼠標懸停在上面時可以終止動畫,純css3滾動特效和JavaScript或者jQuery寫的效果一樣。熟悉css3的animation動畫屬性一下就很好理解原理,具體的請看效果和代碼吧!點擊我看演示(地址:http://tangjiusheng.com/e/demo/css3-rolled)

          代碼如下:

          <!DOCTYPE html>

          <html>

          <head>

          <meta name="baidu-site-verification" content="ZP6BgXCtjB" />

          <meta http-equiv="Cache-Control" content="no-siteapp"/>

          <meta http-equiv="Cache-Control" content="no-transform"/>

          <meta name="applicable-device" content="pc">

          <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

          <title>純css3滾動特效代碼</title>

          <style type="text/css">

          .rolled{

          position:fixed;bottom:20%;z-index:9999999;

          -webkit-animation:rolled 50s .2s ease both infinite;

          -moz-animation:rolled 50s .2s ease both infinite;

          -o-animation:rolled 50s .2s ease both infinite;

          -ms-animation:rolled 50s .2s ease both infinite;

          }

          .rolled:hover{

          -webkit-animation-play-state:paused;

          -moz-animation-play-state:paused;

          -o-animation-play-state:paused;

          -ms-animation-play-state:paused;

          }

          /*滾動動畫*/

          @-webkit-keyframes rolled{

          0%{right:-14%;}

          50%{right:36%;}

          80%{right:66%;}

          100%{right:100%;}

          }

          @-moz-keyframes rolled{

          0%{right:-14%;}

          50%{right:36%;}

          80%{right:66%;}

          100%{right:100%;}

          }

          @-o-keyframes rolled{

          0%{right:-14%;}

          50%{right:36%;}

          80%{right:66%;}

          100%{right:100%;}

          }

          @-ms-keyframes rolled{

          0%{right:-14%;}

          50%{right:36%;}

          80%{right:66%;}

          100%{right:100%;}

          }

          @keyframes rolled{

          0%{right:-14%;}

          50%{right:36%;}

          80%{right:66%;}

          100%{right:100%;}

          }

          </style>

          </head>

          <body>

          <!--向左重復滾動動畫-->

          <div class="rolled">

          <a href="#"><img src="images/rolled.png"></a>

          </div>

          </body>

          </html>

          除注明外的文章,均為來源:湯久生博客,轉載請保留本文地址!

          原文地址:http://tangjiusheng.com/css3/101.html


          主站蜘蛛池模板: 日韩精品一区二区三区在线观看| 亚洲一区二区在线免费观看| 老熟妇仑乱视频一区二区| 人妻无码视频一区二区三区| 国产成人av一区二区三区在线观看| 中文字幕一区二区三区有限公司| 国产精品久久久久一区二区三区 | 亚洲一区二区三区精品视频| 中文字幕亚洲一区二区三区| 国产成人免费一区二区三区| 日本一区二区视频| 麻豆AV一区二区三区久久 | 99久久精品国产一区二区成人 | 亚洲Av永久无码精品一区二区| 久久久综合亚洲色一区二区三区| 国产福利电影一区二区三区,日韩伦理电影在线福 | 日本大香伊一区二区三区| 精品一区二区三区在线观看l| 久久99精品波多结衣一区| 国产亚洲一区二区手机在线观看| V一区无码内射国产| 亚洲国产成人久久一区久久| 国精产品一区一区三区| 久久国产精品免费一区| 天天看高清无码一区二区三区| 国产视频一区在线播放| 夜精品a一区二区三区| 亚洲国产欧美一区二区三区 | 日本一区二区三区在线视频观看免费| 亚洲日韩AV一区二区三区中文 | 欧洲精品免费一区二区三区| 日韩一区二区三区在线| 国产精品538一区二区在线| 国产剧情一区二区| 一区二区三区在线播放视频| 国产高清在线精品一区二区三区 | 国产精品被窝福利一区| 成人国内精品久久久久一区| 国产伦理一区二区| 亚洲国产成人精品无码一区二区| 亚洲综合一区二区三区四区五区|