本文给大家带来了基于js实现简单的音频播放功能，数据是由后台提供的，具体实例代码大家参考下本文
现效果如下：
由于我这边不需要其他按钮，就没写
数据是由后台提供，在这做了个小列子
后台代码
立即学习“Java免费学习笔记（深入）”；
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>
<p class="img-wapper">
<img src="@Model.CoverImg" />
</p>
<p id="player-wapper" class="player-wapper">
<p class="cover-wapper">
<img src="@Model.CoverImg" />
<p class="play">
<i></i>
</p>
</p>
<p class="info-wapper">
<p class="title">@Model.MusicName</p>
<audio id="audio-player" src="@Model.FileUrl" src="@Model.FileUrl" data-start="@Model.MusicStartSecond" data-end="@Model.MusicEndSecond" ></audio>
<p class="audio-progress">
<span id="start-time" class="start-time">00:00</span>
<p id="progress" class="progress">
<span id="player-progress-bar" class="bar">
<i></i>
</span>
</p>
<span id="end-time" class="end-time">00:00</span>
</p>
</p>
</p>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;
}
})上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
