基于JavaScript實(shí)現(xiàn)簡(jiǎn)單的音頻播放功能

public ActionResult MusicPlayer(int musicId=0) {
 MusicPlayerModel model = new MusicPlayerModel();
 switch (musicId)
 {
 default:
 model.MusicName = "Believe-動(dòng)畫(huà)《海賊王》";
 model.CoverImg = "/Content/Music/Believe-cover.jpg";
 model.FileUrl = "/Content/Music/Believe.mp3";
 model.MusicStartSecond = 0;
 model.MusicEndSecond = 227;
 break;
 case 1:
 model.MusicName = "夢(mèng)回還-動(dòng)畫(huà)《狐妖小紅娘》";
 model.CoverImg = "/Content/Music/夢(mèng)回還-cover.jpg";
 model.FileUrl = "/Content/Music/夢(mèng)回還.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"),//默認(rèn)開(kāi)始時(shí)間（秒）
 endSecond = $audioPlay.data("end"),//默認(rèn)結(jié)束時(shí)間（秒）
 playSecond = startSecond,//已播放時(shí)間（秒）
 surplusSecond = endSecond,//剩余時(shí)間（秒）
 audoiTimer = null;
 LoadingTime();
 Playing();
 //通過(guò)點(diǎn)擊進(jìn)度條實(shí)現(xiàn)播放跳轉(zhuǎn)
 $(".progress").click(function (e) {
 //獲取當(dāng)前鼠標(biāo)相對(duì)進(jìn)度條的X坐標(biāo)
 var positionX = e.pageX - $(this).offset().left; 
 var width = $(this).width();
 //進(jìn)度條的X坐標(biāo)/進(jìn)度條寬度獲取播放占比
 var progess = (positionX / width).toFixed(2);
 $("#player-progress-bar").css("width", progess);
 //播放占比*總時(shí)間獲取已播放時(shí)間
 playSecond = parseInt(progess * endSecond);
 surplusSecond = endSecond - playSecond;
 //播放器跳轉(zhuǎn)/跟新播放時(shí)間
 $audioPlay[0].currentTime = playSecond;
 LoadingTime();
 })
 //播放按鈕點(diǎn)擊事件
 $(".play").click(function () {
 if ($playerWapper.hasClass("playing")) {
 Pause();
 }
 else {
 Playing();
 }
 })
 //開(kāi)始/繼續(xù)播放
 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); //每個(gè)1秒執(zhí)行一次
 }
 //暫停播放
 function Pause() {
 $playerWapper.removeClass("playing");
 $playerWapper.addClass("pause");
 window.clearInterval(audoiTimer);
 $audioPlay[0].pause();
 }
 //加載時(shí)間和進(jìn)度條
 function LoadingTime() {
 $("#start-time").html(secondToTime(playSecond));
 $("#end-time").html(secondToTime(surplusSecond));
 $("#player-progress-bar").css("width", Percentage(playSecond, endSecond));
 }
 //計(jì)算百分比
 function Percentage(second1, second2) {
 return (Math.round(second1 / second2 * 10000) / 100+ "%");// 小數(shù)點(diǎn)后兩位百分比
 }
 //時(shí)間轉(zhuǎn)換，將秒轉(zhuǎn)為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;
 }
})