How to use the selected audio file using javascript, via <audio> tag in HTML 5?

Question

How do I deploy a selected audio file using JavaScript via the <audio> tag in HTML5? My code is like this:

<audio controls id="audio1">
    <source  src="" type="audio/ogg">
<source  src="" type="audio/mpeg">
</audio>

I don't want to give src manually. Instead, I want to set it dynamically via JavaScript.

In JavaScript, for selecting the src from files:

document.querySelector('#fileSelect').addEventListener('click', function(e) {
       // Use the native click() of the file input.
     audio.src = document.querySelector('#fileElem').click();
}, false);

I'd welcome any suggestions. Thanks.

thanks guypursey! and mariozski here, I want to change the src attribute of audio-tag by using the javascript. In javascript i am selecting the audio sound track that track i want to play in HTML audio-tag. Thanks for help guys. — Pradeep
– Pradeep, Commented Mar 13, 2013 at 13:16

hamilton.lima · Accepted Answer · 2013-03-13 13:14:41Z

1

Instead of creating a tag why don't you just create an object Audio and do something like this :

var som = new Audio();
som.src = "powerup.mp3";
som.load();

and after audio.readyState >= audio.HAVE_CURRENT_DATA you can call som.play();

This is a sample that wrote some time ago for a game framework : https://github.com/hamilton-lima/vaca5/blob/master/lib/audio.js

answered Mar 13, 2013 at 13:14

hamilton.lima

1,91818 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pradeep Over a year ago

hamilton I looked your code, it's nice & for game purpose. I tried your suggestion but it won't work & couldn't fetch the selected file input to the <audio> tag source dynamically by using js.

hamilton.lima Over a year ago

I wasn't able to use the the <audio> tag neither ... only worked for me create the audio object, using new Audio().

mariozski · Accepted Answer · 2013-03-13 13:02:26Z

1

I'm not exactly sure if I understand what you're trying to achieve. But to set source for audio you do as you've posted:

var element = document.getElementById('audio');
if (element.canPlayType('audio/wav')) {
  element.src = "link";
} else if (element.canPlayType('audio/mpeg')) {
  element.src = "link";
} else {
   alert('Your browser does not support wav/mpeg audio.');
}

Is it not working? What's exactly the problem? Maybe prepare some fiddle to get closer look what are you trying to achieve.

answered Mar 13, 2013 at 13:02

mariozski

1,1341 gold badge7 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to use the selected audio file using javascript, via <audio> tag in HTML 5?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related