You can see it working here with additional styling, looping, and volume control: https://aleks-volume.blogspot.com/
I've hidden the player until it gets appended. However, it can stay visible and un-appended and work just fine.
These are a few of the mechanics I changed:
(These are links to music set inside a list, but the code isn't showing it)
<li><a src='http://www.alexkatz.me/codepen/music/chooseyourweapon.mp3'> Choose</a></li>
<li><a src='http://www.alexkatz.me/codepen/music/interlude.mp3'>Interlude</a></li>
<li><a src='http://www.alexkatz.me/codepen/music/scriptures.mp3'>Scriptures</a></li>
<audio></audio>
var duration = audio.duration; // and all the rest of the "music"s have been changed to "audio"s as well.
var links = document.getElementsByTagName('a');
var link = links;
audioplayer.style.visibility = 'hidden';
// Actions that happen when a link is clicked:
var links = document.getElementsByTagName('a');
var link = links;
for (var m = 0; m < links.length; m++) {
link[m].addEventListener('click', function() {
// Add the classes 'current' and 'visited' to the selected link:
var selected = document.getElementsByClassName('current');
if (selected.length > 0) {
selected[0].className = selected[0].className.replace('current', '');
}
// To work, 'visited' must precede 'current':
this.className += "visited current";
// Attach the player to a 'li' tag. If attached to an 'a' tag,
// the player takes on the tag's styling.
var li = this.parentNode;
li.appendChild(audioplayer);
audioplayer.style.visibility = 'visible';
// Get audio source from an 'a' tag instead of an 'audio' tag:
var source = selected[0].getAttribute('src');
audio.src = source;
audio.play();
})
}; // Actions are finished for the selected link.
};
audio.onplaying = function(){
// remove play, add pause
pButton.className = "pause";
};
// At audio file's end, reset timeline to the beginning.
audio.onended = function(){
playhead.style.marginLeft = "0px";
pButton.className = "play";
};
You can see it working here with additional styling, looping, and volume control: https://aleks-volume.blogspot.com/
I've hidden the player until it gets appended. However, it can stay visible and un-appended and work just fine.
These are a few of the mechanics I changed:
(These are links to music set inside a list, but the code isn't showing it)
<audio></audio>var duration = audio.duration; // and all the rest of the "music"s have been changed to "audio"s as well.
var links = document.getElementsByTagName('a');
var link = links;
audioplayer.style.visibility = 'hidden';
var links = document.getElementsByTagName('a');
var link = links;
for (var m = 0; m < links.length; m++) {
link[m].addEventListener('click', function() {
// Add the classes 'current' and 'visited' to the selected link:
var selected = document.getElementsByClassName('current');
if (selected.length > 0) {
selected[0].className = selected[0].className.replace('current', '');
}
// To work, 'visited' must precede 'current':
this.className += "visited current";
// Attach the player to a 'li' tag. If attached to an 'a' tag,
// the player takes on the tag's styling.
var li = this.parentNode;
li.appendChild(audioplayer);
audioplayer.style.visibility = 'visible';
// Get audio source from an 'a' tag instead of an 'audio' tag:
var source = selected[0].getAttribute('src');
audio.src = source;
audio.play();
})
}; // Actions are finished for the selected link.
};
audio.onplaying = function(){
// remove play, add pause
pButton.className = "pause";
};
// At audio file's end, reset timeline to the beginning.
audio.onended = function(){
playhead.style.marginLeft = "0px";
pButton.className = "play";
};