HTML5 Audio Playlist Dropdown
How do I make an html5 audio playlist dropdown?
What is a html5 audio playlist dropdown? How do you make a html5 audio playlist dropdown? This script and codes were developed by Wyk Parish on 26 November 2022, Saturday.
HTML5 Audio Playlist Dropdown Previews
HTML5 Audio Playlist Dropdown - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Audio Playlist Dropdown</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://katogcholing.com/c/stylesheet.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="audioPanel"> <div class="albumTitle"> <h3 style="display: inline-block;">Finding Joy In Troubled Times</h3> <a href="https://bit.ly/1VnuQPZ"><button style="display: inline-block; margin: 0 0 0 8px;"><i class="fa fa-download"></i></button></a></div> <button id="playprev" class="playerBtn"><i class="fa fa-arrow-left"></i></button> <select id="playlist"> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUQUJhQmVZNWNOa0U">1. Introduction</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUQUJhQmVZNWNOa0U">2. Rinpoche<audio controls></audio><p></ br>hsd sdfkhj sdfh k</p></option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUQUJhQmVZNWNOa0U">3. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUQUJhQmVZNWNOa0U">4. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUQUJhQmVZNWNOa0U">5. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">6. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">7. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">8. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">9. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">10. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">11. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">12. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">13. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">14. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">15. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">16. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">17. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">18. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">19. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">20. Rinpoche</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">21. Paloma</option> <option data-mp3="https://docs.google.com/uc?export=download&id=0B2cLBXvhN6QUcVhLcjNsYnJ5b3M">22. Paloma & Rinpoche</option> </select>
<button id="playnext" class="playerBtn"><i class="fa fa-arrow-right"></i></button>
<div id="playerWrap" class="playerWrap"><audio id="audio" controls></audio></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
HTML5 Audio Playlist Dropdown - Script Codes CSS Codes
body { background-color: #1E508B;
}
.albumTitle {
}
audio
{ width: calc(100% - 2px);
-webkit-transition:all 0.25s linear;
-moz-transition:all 0.25s linear;
-o-transition:all 0.25s linear;
transition:all 0.25s linear;
-moz-box-shadow: 2px 2px 4px 0px rgba(0,0, 0, 0.4);
-webkit-box-shadow: 2px 2px 4px 0 rgba(0,0, 0, 0.4);
box-shadow: 2px 2px 4px 0 rgba(0,0, 0, 0.4);
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
.playerWrap { display: block; margin: 10px auto 0;
}
#playprev { margin: 0 -5px 0 0;
}
#playnext { margin: 0 0 0 -5px;
}
#audioPanel { width: 220px; margin: 0; padding: 10px; background-color: #dddddd;
}
#audioPanel select { /* max-width: 660px; for below IE7 use `width: 660px;` */ width: calc(100% - 62px); height: 21px; margin: 0 auto; padding: 0; list-style-type: none;
}
#audioPanel option {
}
.selected { background-color:#ccc2a6;
}
#audioPanel option:active { position:relative; top:1px;
}HTML5 Audio Playlist Dropdown - Script Codes JS Codes
// globals
var
_player = document.getElementById("audio"),
_playlist = document.getElementById("playlist"),
_playprev = document.getElementById("playprev"),
_playnext = document.getElementById("playnext");
var isPlaying = false;
// functions
function setIsPlaying( audioEl, isPlaying ) { audioEl.setAttribute('playstate', isPlaying);
}
function getIsPlaying( audioEl ) { return audioEl.getAttribute('playstate');
}
function playPrev( selectEl ) { var prevIdx = selectEl.selectedIndex - 1; if (prevIdx!==-1){ selectEl.selectedIndex = prevIdx; selectionChanged(_playlist); playOption(selectEl.options[selectEl.selectedIndex]); }
}
function nextOptionIdx( selectEl ) { var lastIdx = selectEl.options.length - 1; var nextIdx = selectEl.selectedIndex + 1; if (nextIdx>lastIdx) return -1; else return nextIdx;
}
function playNext( selectEl ) { var nextIdx = nextOptionIdx( selectEl ); if (nextIdx!==-1){ selectEl.selectedIndex = nextIdx; selectionChanged(_playlist); playOption(selectEl.options[selectEl.selectedIndex]); }
}
function playOption(option) { _player.src = option.getAttribute("data-mp3"); if (getIsPlaying(_playlist)==="true") _player.play();
}
function selectionChanged(selectEl) { var curId = selectEl.selectedIndex; var lastIdx = selectEl.options.length - 1; _playprev.disabled = (curId === 0); _playnext.disabled = (curId === lastIdx);
}
_player.addEventListener("play", function(e) { setIsPlaying(_playlist, true);
});
_player.addEventListener("pause", function(e) { setIsPlaying(_playlist, false);
});
_player.addEventListener("ended", function(e) { setIsPlaying(_playlist, true); playNext(_playlist);
});
_playprev.addEventListener("click", function(e) { playPrev(_playlist);
});
_playnext.addEventListener("click", function(e) { playNext(_playlist);
});
_playlist.addEventListener("change", function(e) { if (e.target && e.target.nodeName === "SELECT") { selectionChanged(_playlist); playOption(e.target.options[e.target.selectedIndex], !getIsPlaying(_player)); }
});
selectionChanged(_playlist);
//Get the first song loaded but paused
playOption(_playlist.options[_playlist.selectedIndex], true);
| Developer | Wyk Parish |
| Username | wykananda |
| Uploaded | November 26, 2022 |
| Rating | 3 |
| Size | 3,176 Kb |
| Views | 24,288 |
Do you need developer help for HTML5 Audio Playlist Dropdown?
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!
Wyk Parish (wykananda) Script Codes
| Name | Size |
| CSS Menu Play | 2,212 Kb |
| KR Top | 4,270 Kb |
| MediaElement Player | 2,414 Kb |
| Standard KC Sched | 3,532 Kb |
| HTML5 Audio Playlist Long | 4,332 Kb |
| Vue 2 Tut 1 | 2,394 Kb |
| Google Doc Embed | 1,540 Kb |
| HTML5 Audio Playlist | 2,979 Kb |
| KC Border with Flexbox Content | 4,262 Kb |
| Simple HTML5 Player | 4,277 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
| Twinner Spinner II | Katydecorah | 2,974 Kb |
| DFF Website | Hawcubite | 10,123 Kb |
| Flying Bee | Pwsm50 | 3,711 Kb |
| Print element on a page | Mrs_snow | 2,081 Kb |
| Factorial | KeithleySLHS | 1,158 Kb |
| Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
| IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
| Hover Animation from UNIQLO | Insprd | 3,772 Kb |
| E-mail Template | SoloMDFK | 4,871 Kb |
Do you want hide your ip address?
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!