I used some code from this thread to create a website where a randomly selected sound plays on image click: Play random sounds without repeat. It was important to me that the sounds do not repeat until the entire series has been cycled through, which is why I went with this solution: http://jsfiddle.net/cbuckley/FdLge/
It works like a charm in Google Chrome, but for some reason it doesn't seem to play the audio in other web browsers like Safari. I knew it would not work on mobile, but I was not expecting this. Any ideas what I can do to resolve it?
This is my site, for reference: http://comfortinajar.com/
the html is as follows:
<div id="element"></div>
<img src="Images/Screen.jpg" id=test>
and the script is:
<script>
var sounds = [];
// Return the full list of URLs in random order
function getSounds() {
return [
'Audio/Comfort1.mp3',
'Audio/Comfort2.mp3',
'Audio/Comfort3.mp3',
'Audio/Comfort4.mp3',
'Audio/Comfort5.mp3',
'Audio/Comfort6.mp3',
'Audio/Comfort7.mp3',
'Audio/Comfort8.mp3',
'Audio/Comfort9.mp3',
'Audio/Comfort10.mp3',
'Audio/Comfort11.mp3',
'Audio/Comfort12.mp3',
'Audio/Comfort13.mp3',
'Audio/Comfort14.mp3',
'Audio/Comfort15.mp3',
"Audio/Comfort16.mp3",
"Audio/Comfort17.mp3",
"Audio/Comfort18.mp3"].sort(function () {
// http://stackoverflow.com/a/18650169/283078
return (.5 - Math.random());
});
}
// Play the next sound
function playSound() {
if (!sounds.length) {
// Get the list of sounds (random order)
sounds = getSounds();
}
// Pops a URL every time, ensuring all are played exactly once
$("#element").html(
'<embed src="' + sounds.pop() +
'" hidden="true" autostart="true" />'
);
// Once all the URLs have been popped, the array is repopulated
}
$('#test').click(playSound);
</script>
The code also currently causes a page jump where the div tag is (at the very bottom of the page) the first time that it is loaded, and a block of white remains there after that, and the first sound loaded fades in for some reason (reducing audibility), but I am less concerned with those problems. All I really care about is making the sound work in all browsers. Let me know if you can help!