It's pretty simple to get started really:

function playSound(url) {
    var a = new Audio(url);
    a.play();
}

Use that as whatever event handler you want for your application. Of course, I'd hope you'd want to do more than just play (for example, maybe pause would be good too?), but it's a start.

I believe you have to pass the extension here as well. This does work because this server is CORS enabled.

form.addEventListener("submit", myFunction)
function myFunction(e) {
  e.preventDefault();
  audio.src = 'https://bobzilla07.github.io/Music_Tap/' + myInput.value + '.mp3';
  audio.play();
}

audio { display:none;}

<form id="form">
  <input id="myInput" value="Panic-Song">
  <input type="submit">
</form>
<audio controls id="audio"></audio>

Song list

Audio works correctly cross server without an additional issues, see the example below.

There can be a number of reasons why this wouldn't work:

• Check the network tab to make sure the wav file is in the correct location.
• Check the console for any warning messages of why it couldn't load.
• Check this question/answer for additional debugging steps.
• Post back with the URL that you're trying to grab from, or additional information about the request.

async function playAudio() {
  var audio = new Audio('https://www2.cs.uic.edu/~i101/SoundFiles/StarWars60.wav');  
  audio.type = 'audio/wav';

  try {
    await audio.play();
    console.log('Playing...');
  } catch (err) {
    console.log('Failed to play...' + err);
  }
}

<a href="#" onclick="playAudio()">Play Audio</a>

That's audio/mpeg, not audio/ogg, as seen from headers:

Content-Type:audio/mpeg

Try this:

<audio controls="controls">
  <source src="http://translate.google.com/translate_tts?tl=en&q=Hello%2C+World" type="audio/mpeg">
</audio>

http://jsfiddle.net/ZCwHH/

Works in browsers that play mp3, like google chrome.

If you don't want to mess with HTML elements:

var audio = new Audio('audio_file.mp3');
audio.play();

function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
  audio.play();
}

<button onclick="play()">Play Audio</button>

This uses the HTMLAudioElement interface, which plays audio the same way as the <audio> element.

If you need more functionality, I used the howler.js library and found it simple and useful.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

If you're using something like canvas and you're already depending on the browser supporting HTML5, you can use the audio element.

var win = new Audio('srcfile.wav');
if(playerWon === true){
    win.play();
}