public ActionResult MusicPlayer(int musicId=0) {   MusicPlayerModel model = new MusicPlayerModel();   switch (musicId)   {    default:     model.MusicName = "Believe-動畫《海賊王》";     model.CoverImg = "/Content/Music/Believe-cover.jpg";     model.FileUrl = "/Content/Music/Believe.mp3";     model.MusicStartSecond = 0;     model.MusicEndSecond = 227;     break;    case 1:     model.MusicName = "夢回還-動畫《狐妖小紅娘》";     model.CoverImg = "/Content/Music/夢回還-cover.jpg";     model.FileUrl = "/Content/Music/夢回還.mp3";     model.MusicStartSecond = 0;     model.MusicEndSecond = 250;     break;   }   return View(model);  }

@using FunctionTest.Web.Areas.Function.Models;@model MusicPlayerModel@{ ViewBag.Title = "MusicPlayer"; Layout = "~/Areas/Function/Views/Shared/_FunctionLayout.cshtml";}<link href="~/Assets/Function/MusicPlayer/musicPlayer.css" rel="external nofollow" rel="stylesheet" /><script src="~/Assets/Function/MusicPlayer/musicPlayer.js"></script><div class="img-wapper"> <img src="@Model.CoverImg" /></div><div id="player-wapper" class="player-wapper"> <div class="cover-wapper">  <img src="@Model.CoverImg" />  <div class="play">   <i></i>  </div> </div> <div class="info-wapper">  <div class="title">@Model.MusicName</div>  <audio id="audio-player" src="@Model.FileUrl" data-src="@Model.FileUrl" data-start="@Model.MusicStartSecond" data-end="@Model.MusicEndSecond" ></audio>  <div class="audio-progress">   <span id="start-time" class="start-time">00:00</span>   <div id="progress" class="progress">    <span id="player-progress-bar" class="bar">     <i></i>    </span>   </div>   <span id="end-time" class="end-time">00:00</span>  </div> </div></div>

;$(function () { var $playerWapper = $("#player-wapper"),  $audioPlay = $("#audio-player"),  startSecond = $audioPlay.data("start"),//默認開始時間（秒）  endSecond = $audioPlay.data("end"),//默認結束時間（秒）  playSecond = startSecond,//已播放時間（秒）  surplusSecond = endSecond,//剩余時間（秒）  audoiTimer = null; LoadingTime(); Playing(); //通過點擊進度條實現播放跳轉 $(".progress").click(function (e) {  //獲取當前鼠標相對進度條的X坐標  var positionX = e.pageX - $(this).offset().left;   var width = $(this).width();  //進度條的X坐標/進度條寬度獲取播放占比  var progess = (positionX / width).toFixed(2);  $("#player-progress-bar").css("width", progess);  //播放占比*總時間獲取已播放時間  playSecond = parseInt(progess * endSecond);  surplusSecond = endSecond - playSecond;  //播放器跳轉/跟新播放時間  $audioPlay[0].currentTime = playSecond;  LoadingTime(); }) //播放按鈕點擊事件 $(".play").click(function () {  if ($playerWapper.hasClass("playing")) {   Pause();  }  else {   Playing();  } }) //開始/繼續播放 function Playing() {  $playerWapper.addClass("playing");  $playerWapper.removeClass("pause");  $audioPlay[0].play();  audoiTimer = setInterval(function () {   playSecond++;   surplusSecond--;   LoadingTime();   if (surplusSecond <= 0) {    playSecond = startSecond;    surplusSecond = endSecond;    Pause();   }  }, 1000); //每個1秒執行一次 } //暫停播放 function Pause() {  $playerWapper.removeClass("playing");  $playerWapper.addClass("pause");  window.clearInterval(audoiTimer);  $audioPlay[0].pause(); } //加載時間和進度條 function LoadingTime() {  $("#start-time").html(secondToTime(playSecond));  $("#end-time").html(secondToTime(surplusSecond));  $("#player-progress-bar").css("width", Percentage(playSecond, endSecond)); } //計算百分比 function Percentage(second1, second2) {  return (Math.round(second1 / second2 * 10000) / 100+ "%");// 小數點后兩位百分比 } //時間轉換，將秒轉為00:00:00格式 function secondToTime(s) {  var t;  if (s > -1) {   var hour = Math.floor(s / 3600);   var min = Math.floor(s / 60) % 60;   var sec = s % 60;   if (hour < 10) {    t = '0' + hour + ":";   } else {    t = hour + ":";   }   if (min < 10) { t += "0"; }   t += min + ":";   if (sec < 10) { t += "0"; }   t += sec;  }  return t; }})