音乐播放小窗口html,jQuery+html5迷你网页音乐播放器代码

一款外观十分简洁的jQuery+html5迷你网页音乐播放器代码，很实用的mp3音乐播放器插件，有比较基本的播放、暂停、上一首下一首歌曲切换等功能。

查看演示

下载资源：

20

次 下载资源

下载积分：

20

积分

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 * 4 + '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 * 4 + '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 + '%';

});

}

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 * 4 + '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();

});

});