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 音频播放器插件：
- jPlayer
- 功能全面的 HTML5 音频/视频播放器
- 支持多种格式和流媒体
- 提供皮肤定制
$("#jquery_jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
mp3: "audio-file.mp3"
});
},
swfPath: "/js",
supplied: "mp3"
});- 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 音频播放器实现方案，可根据项目需求选择适合的方式或组合使用。
