Change <Audio> Src with JavaScript

change audio src with javascript

Try this snippet

list.onclick = function(e) {  e.preventDefault();
  var elm = e.target;  var audio = document.getElementById('audio');
  var source = document.getElementById('audioSource');  source.src = elm.getAttribute('data-value');
  audio.load(); //call this to just preload the audio without playing  audio.play(); //call this to play the song right away};

<ul style="list-style: none">  <li>Audio Files    <ul id="list">      <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Death_Becomes_Fur.oga</a></li>      <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4">Death_Becomes_Fur.mp4</a></li>      <li><a href="#" data-value="http://media.w3.org/2010/11/rrs006.oga">rrs006.oga</a></li>      <li><a href="#" data-value="http://media.w3.org/2010/05/sound/sound_90.mp3">sound_90.mp3</a></li>    </ul>  </li></ul>
<audio id="audio" controls="controls">  <source id="audioSource" src=""></source>  Your browser does not support the audio format.</audio>

audio src change with javascript

I believe you have to tell the browser to load the new file when you change the src attribute, by calling load:

var playme = document.getElementById('playme'); playme.src='snd/SOUND.WAV'; playme.load();

Change audio file on button click

There is no .load() event on a <source> tag, it is on the <audio> tag - update your code to call load() on the parent <audio> tag and it should work.

Change audio tag src by function

Your function ends at the start, because you have the closing brace } in the wrong place:

function playAudio(file)
    {
    var audio = file;
    }

This should be written as:

 function playAudio(file)
    {
    var audio = file;
    if(audio !== '') {
    document.getElementById('player').src = 'music/'+audio;
    }
    else {

    }
}

Also, id isnt a href, this should be:

<a href="#play" id="play" onclick="playAudio('song.mp3');">Play</a>

After changing audio source property, previously set stream continues to play

Based on the comment from DBS, .load() needs to be invoked on the audio element after the source is changed. This is easily accomplished with a useEffect with some assistance with useRef to get access to the <audio> element.

Updated MediaPlayer component to be:

const MediaPlayer = (props) => {

  const audioRef = useRef();  // ADDED THIS

  if (props.src) {
    console.log("Url selected for playback: ", props.src);
  }
  else {
    console.log("Nothing ready to play");
  }

  // ADDED useEffect
  useEffect(()=> {
    console.log("useEffect invoked");
    if (props.src) {
      let audio = audioRef.current;
      if (audio) {
        audio.load();
      }
    }
  }, [props.src]);

  // ADDED ref={audioRef} as attribute
  return (props.src ? (<div><audio ref={audioRef} controls autoPlay><source src={props.src} /></audio><br/>{props.src}</div>)
                    : (<div>Nothing yet to play</div>)
         );
};

Using Multimedia Keys to Change Audio Src

I also have a similar problem which was solved by using media session API.
here is the link

edit: This is the best post I've found in media session api and it is as easy as copy paste.

I can't make comments yet so writing it as an answer.

How to change audio src by click using jquery?

You will need to bind click event handler to a (or delegate events to parent #playlist) and assign new src to #audio source:

$('#playlist').on('click', 'a', function(e) {
    e.preventDefault();
    var src = $(this).attr('href');
    $('#audio source').attr('src', src);
});

Important: remember to prevent default behavior of HTMLAnchorElement on click which is page reload.

I want to change audio source onClick

You have to use a timer to make sure the DOM has been updated before you interact with the element like

    data() {
    return {
      audioSrc: ''
    }
  },
  methods: {
    setActiveAudio(item) {
      this.audioSrc = item;

      var element = this.$refs.audioElm;
      setTimeout(function()
      {
        element.currentTime = 0;
        element.crossOrigin = 'anonymus';
        element.play();      
      }, 0);
    },
  }

Working example on https://jsfiddle.net/AndersBillLinden/6x8hzrga/

---

Related Topics