Я хочу улучшить аудиоплеер на сайте группы. Я использую легкий и мощный скрипт с jquery-1.7. Я хотел бы улучшить игрока с помощью художника и предметов обложки. Я искал и пытался, но не нашел решения, совместимого с моим сценарием.
$(window).load(function() {
var audio, playlist, tracks, current;
init();
function init() {
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length;
audio[0].volume = .60;
playlist.find('a').click(function(e) {
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended', function(e) {
current++;
if (current == len) {
current = 0;
link = playlist.find('a')[0];
} else {
link = playlist.find('a')[current];
}
run($(link), audio[0]);
});
}
function run(link, player) {
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player">
<ul id="playlist">
<li><a href="audio/01.mp3">song 01</a></li>
<li><a href="audio/02.mp3">song 02</a></li>
<li><a href="audio/03.mp3">song 03</a></li>
<li><a href="audio/04.mp3">song 04</a></li>
<li><a href="audio/05.mp3">song 05</a></li>
<li><a href="audio/06.mp3">song 06</a></li>
<li><a href="audio/07.mp3">song 07</a></li>
<li><a href="audio/08.mp3">song 08</a></li>
<li><a href="audio/09.mp3">song 09</a></li>
<li><a href="audio/10.mp3">song 10</a></li>
</ul>
</div>
<audio id="audio" controls type="audio/mpeg">
Sorry, your browser does not support HTML5 audio
</audio>
</div>