0

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!

  • I would guess this is an issue with browsers preventing autoplaying audio... do you get any errors in the console at all? – OliverRadini Apr 12 '19 at 08:16
  • Even in the console it doesn't appear to work in Safari, AND even when I adjust my browser's autoplay settings to allow sound to autoplay from that website :( – Lauren Apr 17 '19 at 18:40

0 Answers0