jquery 播放器

jQuery 音频播放器实现

使用 jQuery 可以轻松创建一个自定义音频播放器，以下是几种常见方法：

基础音频播放器

<audio id="myAudio" src="audio-file.mp3"></audio>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>

$(document).ready(function(){
  const audio = $("#myAudio")[0];

  $("#playBtn").click(function(){
    audio.play();
  });

  $("#pauseBtn").click(function(){
    audio.pause();
  });
});

带进度条的播放器

<audio id="player" src="song.mp3"></audio>
<div class="controls">
  <button class="play">播放</button>
  <input type="range" class="progress" value="0">
  <span class="time">0:00</span>
</div>

$(function(){
  const player = $('#player')[0];
  const $progress = $('.progress');
  const $time = $('.time');

  $('.play').click(function(){
    if(player.paused){
      player.play();
      $(this).text('暂停');
    } else {
      player.pause();
      $(this).text('播放');
    }
  });

  player.addEventListener('timeupdate', function(){
    const percent = (player.currentTime / player.duration) * 100;
    $progress.val(percent);

    // 格式化时间显示
    const mins = Math.floor(player.currentTime / 60);
    const secs = Math.floor(player.currentTime % 60);
    $time.text(`${mins}:${secs < 10 ? '0' : ''}${secs}`);
  });

  $progress.on('input', function(){
    const seekTime = (player.duration * $(this).val()) / 100;
    player.currentTime = seekTime;
  });
});

使用 jQuery 插件

对于更复杂的功能，可以使用专门的 jQuery 音频播放器插件：

1. jPlayer
   • 功能全面的 HTML5 音频/视频播放器
   • 支持多种格式和流媒体
   • 提供皮肤定制

$("#jquery_jplayer_1").jPlayer({
  ready: function() {
    $(this).jPlayer("setMedia", {
      mp3: "audio-file.mp3"
    });
  },
  swfPath: "/js",
  supplied: "mp3"
});

1. MediaElement.js
   • 支持音频和视频
   • 提供 HTML5 和 Flash 回退
   • 可自定义 UI

$('audio').mediaelementplayer({
  features: ['playpause', 'progress', 'volume'],
  audioWidth: 400
});

播放列表功能实现

const playlist = [
  { title: "歌曲1", src: "song1.mp3" },
  { title: "歌曲2", src: "song2.mp3" }
];
let currentTrack = 0;

function loadTrack(num) {
  $("#current-song").text(playlist[num].title);
  $("#player").attr("src", playlist[num].src)[0].play();
}

$("#next").click(function(){
  currentTrack = (currentTrack + 1) % playlist.length;
  loadTrack(currentTrack);
});

$("#prev").click(function(){
  currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
  loadTrack(currentTrack);
});

loadTrack(0);

响应式设计考虑

为适应不同设备，可添加 CSS 媒体查询：

@media (max-width: 600px) {
  .player-container {
    width: 100%;
  }
  .controls button {
    padding: 8px 12px;
  }
}

这些方法提供了从基础到高级的 jQuery 音频播放器实现方案，可根据项目需求选择适合的方式或组合使用。