jQuery音乐播放器

最新推荐文章于 2025-06-15 13:55:40 发布

优睿

最新推荐文章于 2025-06-15 13:55:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端音乐播放器文章标签：音乐播放器前端开发

本文链接：https://blog.youkuaiyun.com/qq_36926807/article/details/81043907

前端同时被 2 个专栏收录

23 篇文章

订阅专栏

音乐播放器

1 篇文章

订阅专栏

本文介绍了如何使用jQuery和TweenMax库创建一个简单的音乐播放器。通过改变元素样式和监听音频播放状态，实现了播放/暂停、进度条更新及歌曲切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

实现这个功能需要引入：

TweenMax.min.js

js代码如下：

$(document).ready(function () {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', $('.active-song').attr('data-src'));

var tl = new TimelineMax();
tl.to('.player__albumImg', 3, {
rotation: '360deg',
repeat: -1,
ease: Power0.easeNone
}, '-=0.2');
tl.pause();

$('.player__play').click(function () {

if ($('.player').hasClass('play')) {
$('.player').removeClass('play');
audioElement.pause();
TweenMax.to('.player__albumImg', 0.2, {
scale: 1,
ease: Power0.easeNone
})
tl.pause();
} else {
$('.player').addClass('play');
audioElement.play();
TweenMax.to('.player__albumImg', 0.2, {
scale: 1.1,
ease: Power0.easeNone
})
tl.resume();
}

});

var playhead = document.getElementById("playhead");
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + 'px';
});

function updateInfo() {
$('.player__author').text($('.active-song').attr('data-author'));
$('.player__song').text($('.active-song').attr('data-song'));
}
updateInfo();

$('.player__next').click(function () {
if ($('.player .player__albumImg.active-song').is(':last-child')) {
$('.player__albumImg.active-song').removeClass('active-song');
$('.player .player__albumImg:first-child').addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + 'px';
});
} else {
$('.player__albumImg.active-song').removeClass('active-song').next().addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + 'px';
});
}
updateInfo();
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
audioElement.play();
});

$('.player__prev').click(function () {
if ($('.player .player__albumImg.active-song').is(':first-child')) {
$('.player__albumImg.active-song').removeClass('active-song');
$('.player .player__albumImg:last-child').addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + 'px';
});
} else {
$('.player__albumImg.active-song').removeClass('active-song').prev().addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + 'px';
});
}
updateInfo();
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
audioElement.play();
});