Helper
HTML Audio Player embedd
jQuery audio file player – embedded code
For proper working you should copy this embed code into your document, use your own links to your audio files and use any image or html element to start or stop to play an audio. Important thing is setup a proper ID on clickable elements (any HTML element) based on linked audio files ID's in embedded code. Audio starts play on a click and stops when you click again on the image.
Play different audio files with click on any HTML object (image)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const audioFiles = {
"one" : src="https://goeast-s3-server.s3.eu-central-1.amazonaws.com/1.mp3",
"two" : src="https://goeast-s3-server.s3.eu-central-1.amazonaws.com/2.mp3",
"three": src="https://goeast-s3-server.s3.eu-central-1.amazonaws.com/4.mp3",
"four": src="https://goeast-s3-server.s3.eu-central-1.amazonaws.com/folder/5.mp3",
"five": src="https://goeast-s3-server.s3.eu-central-1.amazonaws.com/folder/6.mp3"
} const audioObjects = {} function play(id) {
const isPaused = (audioObjects[id].currentTime <= 0 || audioObjects[id].paused)
stopAll();
// only start if its not playing (if you click on a playing one, it stops)
if (isPaused){
audioObjects[id].currentTime = 0;
audioObjects[id].play();
}
} function stopAll(){
Object.keys(audioObjects).forEach(function(id) {
audioObjects[id].pause()
});
} function loadAll(){
Object.keys(audioFiles).forEach(function(id) {
const file = audioFiles[id]
audioObjects[id] = new Audio();
audioObjects[id].src = file
audioObjects[id].addEventListener('load', function () {
//debug only
//console.log("loaded" + id +": " + file)
});
const playButton = document.getElementById(id)
playButton.addEventListener("click", () => {
play(id);
});
});
}
Image ID=one
Image ID=two
Image ID=three
Image ID=four
Image ID=five