0

I'm attempting to create a link that plays sound when it is pressed. I found a solution describing how to do this, but when I implemented it, I wasn't able to produce sound. The relevant HTML is below.

  <div class="choices">
        <a class="buttons" id="choice1" href="#" onclick="choiceSelected();return false;"></a>
        <a class="buttons" id="choice2" href="#" onclick="choiceSelected();return false;"></a>
        <a class="buttons" id="choice3" href="#" onclick="choiceSelected();return false;"></a>
        <a class="buttons" id="choice4" href="#" onclick="choiceSelected();return false;"></a>
    </div>

And here is the javascript (it is in an external file that is linked in the head of my document):

 function choiceSelected(){ 
        var audio = new Audio("buttonClick.mp3");
        audio.play();
        console.log("Audio should have played");
    }

I added the console.log("Audio should have played"); to test if the function was working and it is. The console displays "Audio should have played" and reports no errors. Everything seems to be working, except there is no sound produced. The sound file buttonClick.mp3 is in the correct path.

I have tried using different file types (OGG, AAC, etc.) and none of them have worked. I have also attempted replacing the file with a link to an online file that I know works, so I don't think it is an issue with the file.

I saw there were some problems with Safari not playing audio to preserve power, but those articles looked to be at least 2-3 years old, so I am not sure that is the issue either (if it still is an issue, could you please let me know).

Any assistance with getting the audio to work would be greatly appreciated.

Community
  • 1
  • 1
Eric Wiener
  • 4,929
  • 4
  • 31
  • 40

2 Answers2

0

I can't tell you what the problem is, but maybe you could try to see if the path is correct, I mean, the level, maybe it should be "../audio.mp3"

You can also try to Play with the Audio Tag

<audio id="myAudioTag">
    <source src="../file.mp3" type="audio/mp3" />        
</audio>

Notice that I am not using the "controls" property since I don't want it to be displayed.

In the script, you should have something like this

document.getElementById('myAudioTag').play();
Hugo Quiñónez
  • 176
  • 1
  • 9
0

Thanks for the help, but it turned out to be a corrupted file. The original code worked.

Eric Wiener
  • 4,929
  • 4
  • 31
  • 40