现效果如下：
由于我这边不需要其他按钮，就没写
数据是由后台提供，在这做了个小列子
后台代码
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; ???}})Js实现简单的音频播放
原文地址：https://www.cnblogs.com/HJbk/p/8214142.html