change audio src with javascript

Question

I have multiple audio files that I want to stream based on the user selects  How do I do that  This is what I have so far and it doesn t seem to work     UPDATE  Made a few changes and now its claiming that audio load    is not a function  Can anyone tell me why that is  The Code is updated to reflect the changes    JavaScript   function updateSource         var audio   document getElementById  oggSource        audio src             audio ogg              document getElementById  song1   getAttribute  data-value        audio load        HTML    lt audio id  audio  controls  controls  gt       lt source id  oggSource  src    type  audio ogg  gt  lt  source gt       lt source id  mp3Source  type  audio mp3  gt  lt  source gt          Your browser does not support the audio format   lt  audio gt    lt ul style  list-style  none  gt       lt li gt Sunday May 27  2012          lt ul style  display  none  gt               lt li id  song1  data-value  song1 ogg  gt                   lt button onclick  updateSource     gt Item1 lt  button gt               lt  li gt               lt li gt Item2 lt  li gt               lt li gt Item3 lt  li gt           lt  ul gt       lt  li gt   lt  ul gt    Item2 and Item3 I will want to play a different audio file when they are clicked on

User · Answer

with jQuery        playerSource   attr  src    new src         var audio       player               audio 0  pause        audio 0  load     suspends and restores all audio element      if  isAutoplay           audio 0  play

User · Answer

Here is how I did it using React and CJSX  Coffee JSX  based on Vitim us solution  Using componentWillReceiveProps I was able to detect every property changes  Then I just check whether the url has changed between the future props and the current one  And voil      propTypes       element  React PropTypes shape            version  React PropTypes number          params               React PropTypes shape                   url  React PropTypes string isRequired                  filename  React PropTypes string isRequired                  title  React PropTypes string isRequired                  ext  React PropTypes string isRequired                isRequired         isRequired  componentWillReceiveProps   nextProps  - gt      element   ReactDOM findDOMNode this      audio   element querySelector  audio       source   audio querySelector  source          When the url changes  we refresh the component manually so it reloads the loaded file     if nextProps element params  filename  and     nextProps element params url isnt  props element params url         source src   nextProps element params url         audio load     I had to do it this way  because even a change of state or a force redraw didn t work

User · Answer

Try this   Replace   audio load      with   audio play

User · Answer

If you are storing metadata in a tag use data attributes eg    lt li id  song1  data-value  song1 ogg  gt  lt button onclick  updateSource    gt Item1 lt  button gt  lt  li gt    Now use the attribute to get the name of the song  var audio   document getElementById  audio    audio src  audio ogg     document getElementById  song1   getAttribute  data-value    audio load

User · Answer

Try this snippet   x000D   x000D  list onclick   function e    x000D    e preventDefault    x000D   x000D    var elm   e target  x000D    var audio   document getElementById  audio    x000D   x000D    var source   document getElementById  audioSource    x000D    source src   elm getAttribute  data-value    x000D   x000D    audio load      call this to just preload the audio without playing x000D    audio play      call this to play the song right away x000D     x000D   lt ul style  list-style  none  gt  x000D     lt li gt Audio Files x000D       lt ul id  list  gt  x000D         lt li gt  lt a href     data-value  http   media w3 org 2010 07 bunny 04-Death Becomes Fur oga  gt Death Becomes Fur oga lt  a gt  lt  li gt  x000D         lt li gt  lt a href     data-value  http   media w3 org 2010 07 bunny 04-Death Becomes Fur mp4  gt Death Becomes Fur mp4 lt  a gt  lt  li gt  x000D         lt li gt  lt a href     data-value  http   media w3 org 2010 11 rrs006 oga  gt rrs006 oga lt  a gt  lt  li gt  x000D         lt li gt  lt a href     data-value  http   media w3 org 2010 05 sound sound 90 mp3  gt sound 90 mp3 lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   lt audio id  audio  controls  controls  gt  x000D     lt source id  audioSource  src    gt  lt  source gt  x000D    Your browser does not support the audio format  x000D   lt  audio gt  x000D   x000D   x000D    JSFiddle http   jsfiddle net jm6ky 2

User · Answer

change this   audio src  audio ogg     document getElementById song1 ogg     to   audio src  audio ogg     document getElementById  song1

[javascript] change <audio> src with javascript

Examples related to javascript

Examples related to html

Examples related to html5-audio