JavaScript를 사용하여 오디오 재생 기능을 구현하는 방법

이 글은 js 기반의 간단한 오디오 재생 기능을 제공합니다. 데이터는 배경에서 제공됩니다.

현재 효과는 다음과 같습니다.

Since I don' 여기에 다른 버튼은 필요 없고 아무것도 쓰지 않았습니다

데이터는 백엔드에서 제공되므로 여기에 작은 목록을 만들었습니다

백엔드 코드

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 = &#39;0&#39; + hour + ":";
   } else {
    t = hour + ":";
   }
   if (min < 10) { t += "0"; }
   t += min + ":";
   if (sec < 10) { t += "0"; }
   t += sec;
  }
  return t;
 }
})

위는 제가 컴파일한 것입니다 모두를 위해, 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue가 패키징 도구를 구성하는 방법에 대한 자세한 설명

Parcel을 사용하여 패키징하는 방법

자세한 답변: Vue의 변경 사항이 구성 요소에 어떤 영향을 미치나요?

위 내용은 JavaScript를 사용하여 오디오 재생 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!