一款外觀十分簡潔的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();

});

});

總結

以上是生活随笔為你收集整理的音乐播放小窗口html,jQuery+html5迷你网页音乐播放器代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。