|
数据是由后台提供，在这做了个小列子
后台代码 复制代码 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="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> 复制代码 Js 复制代码 ;$(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; } }) 复制代码
|