HTML5 Audio Player + Playlist

Developer
Adam Grayson
Size
2,931 Kb
Views
18,216
  1. HTML5 Audio Player + Playlist Previews
  2. HTML5 Audio Player + Playlist HTML Codes
  3. HTML5 Audio Player + Playlist CSS Codes
  4. HTML5 Audio Player + Playlist JS Codes

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 Previews
IQ Test

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());
HTML5 Audio Player + Playlist - Script Codes
HTML5 Audio Player + Playlist - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 3
Size 2,931 Kb
Views 18,216
Do you need developer help for HTML5 Audio Player + Playlist?

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!

Adam Grayson (agrayson) Script Codes
Name
Multi-Column Responsive Carousel
Simple Accordion
CCS3 Navigation Hover Effect
Dynamic circle menus with SASS
Responsive Carousel
HTML5 GeoLocation Example
Minimal Solar System
Random Weapon Generator
RPG Cooldown
Sliding Lines Animation
Create amazing web content with AI!

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!