基于JavaScript实现简单的音频播放功能

现效果如下：

由于我这边不需要其他按钮，就没写

数据是由后台提供，在这做了个小列子

后台代码

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>

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;
 }
})

以上所述是小编给大家介绍的基于JavaScript实现简单的音频播放功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！