How to implement audio playback function using JavaScript

This article brings you a simple audio playback function based on js. The data is provided by the background. Please refer to this article for specific example codes.

The effect is as follows:

Since I don’t need other buttons here, I didn’t write it

The data is provided by the background, so I made a small example here

Backend code

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

Page code

@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="/static/imghwm/default1.png"  data-src="@Model.CoverImg"  class="lazy"   / alt="How to implement audio playback function using JavaScript" >
</p>
<p id="player-wapper" class="player-wapper">
 <p class="cover-wapper">
  <img  src="/static/imghwm/default1.png"  data-src="@Model.CoverImg"  class="lazy"   / alt="How to implement audio playback function using JavaScript" >
  <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 = &#39;0&#39; + hour + ":";
   } else {
    t = hour + ":";
   }
   if (min < 10) { t += "0"; }
   t += min + ":";
   if (sec < 10) { t += "0"; }
   t += sec;
  }
  return t;
 }
})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of how to configure the packaging tool in Vue

How to package using Parcel

Detailed answer: What impact do changes in vue have on components?

The above is the detailed content of How to implement audio playback function using JavaScript. For more information, please follow other related articles on the PHP Chinese website!