基于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实现简单的音频播放功能，希望对大家有所帮助