HTML5 Audio Player + Playlist
How do I make an html5 audio player + playlist?
What is a html5 audio player + playlist? How do you make a html5 audio player + playlist? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.
HTML5 Audio Player + Playlist - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Audio Player + Playlist</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="audio-player-container"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
HTML5 Audio Player + Playlist - Script Codes CSS Codes
* { box-sizing: border-box;
}
.audio-player-container { padding: 16px;
}
.audio-player-container audio { width: 100%; display: block;
}
.audio-player-container ul { background-color: lightgray;
}
.audio-player-container ul li { padding: 16px; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.audio-player-container ul li.active { background-color: gray;
}
.audio-player-container ul li:last-child { border-bottom: 0;
}
HTML5 Audio Player + Playlist - Script Codes JS Codes
//Audio Player Class
var AudioPlayer = function () { this._playlist = null; this._currentSongIndex = 0; this._getContainer = function () { if (this._$container == null) { this._$container = $('<div>'); this._$container.addClass('container'); this._$container.append(this._getAudio()); this._$container.append(this._getList()); } return this._$container; }; this._getAudio = function () { if (this._$audio == null) { this._$audio = $('<audio>'); this._$audio.attr('preload', true); this._$audio.attr('controls', ''); this._$audio[0].src = this._playlist[this._currentSongIndex]['url']; this._$audio[0].addEventListener('ended', this._handleAudioEnded.bind(this)); } return this._$audio; }; this._getList = function () { if (this._$list == null) { this._$list = $('<ul>'); this._$list.addClass('list'); for (var i = 0; i < this._playlist.length; i++) { var currentAudioUrl = this._playlist[i], $listItem = $('<li>'); $listItem.addClass('list-item'); $listItem.attr('audio-url', currentAudioUrl.url); $listItem.on('click', this._handListItemClick.bind(this)); $listItem.text(currentAudioUrl.name + ' - ' + currentAudioUrl.duration); this._$list.append($listItem); } this._$list.find('li').eq(this._currentSongIndex).addClass('active'); } return this._$list; }; this._handListItemClick = function (e) { var $this = $(e.currentTarget); this._currentSongIndex = $this.index(); this._playAudioFromCurrentIndex(); }; this._handleAudioEnded = function (e) { this._currentSongIndex++; if (this._currentSongIndex == this._playlist.length) this._currentSongIndex = 0; this._playAudioFromCurrentIndex(); }; this._playAudioFromCurrentIndex = function () { var $allListItems = this._getList().find('li'), $targetListItem = this._getList().find('li').eq(this._currentSongIndex), audioUrl = $targetListItem.attr('audio-url'); $allListItems.removeClass('active'); $targetListItem.addClass('active'); this._getAudio()[0].src = audioUrl; this._getAudio()[0].load(); this._getAudio()[0].play(); }; this.setPlaylist = function (playlist) { this._playlist = playlist; }; this.getHtml = function () { return this._getContainer(); };
};
//Declare playlist
var trackUrls = [{ 'name': 'Sleigh Ride', 'duration': '6:26', 'url': 'https://www.xmog.com/media/holiday-card/joe-fritz-duke-pearson-sleigh-ride.mp3' }, { 'name': 'Tijuana Christmas', 'duration': '1:59', 'url': 'https://www.xmog.com/media/holiday-card/mark-allen-tijuana-christmas.mp3' }];
//make a new player
var audioPlayer = new AudioPlayer();
audioPlayer.setPlaylist(trackUrls);
//append the player
$('.audio-player-container').append(audioPlayer.getHtml());
Developer | Adam Grayson |
Username | agrayson |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 2,931 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Multi-Column Responsive Carousel | 5,686 Kb |
Minimal Solar System | 3,425 Kb |
Sliding Lines Animation | 2,572 Kb |
Custom Select Element | 3,616 Kb |
Simple Accordion | 2,952 Kb |
RPG Cooldown | 2,902 Kb |
Circle Progression Plugin | 2,612 Kb |
Playing Animations on Scroll | 19,876 Kb |
Dungeon Crawler | 3,644 Kb |
Responsive Carousel | 3,291 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
The CodePen Logo | Kindofone | 4,259 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!