这是一款html5基于svg制作网页迷你音乐播放器,支持上一首、下一首歌曲切换播放,可手动添加多个音乐歌单。这是一款简单实用的mp3音乐播放器样式代码。
使用方法
在页面引入以下jquery.min.js、TweenMax.min.js文件
<script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript"> $(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(); }); }); </script>