特效描述：html5 迷你音樂播放器。html5基于svg制作網頁迷你音樂播放器，支持上一首、下一首歌曲切換播放，可手動添加多個音樂歌單。這是一款簡單實用的mp3音樂播放器樣式代碼。

代碼結構

1. 引入CSS

2. 引入JS

3. HTML代碼

data-author="Khalid"

data-song="Location"

data data-src="mp3/akon.mp3" style="background-image: url(img/a1.png)">

data-author="Khalid"

data-song="Angels"

data data-src="mp3/khalid-angels.mp3" style="background-image: url(img/a1.png)">

$(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();

});

});

總結

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

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