Member Avatar for odee

need help here. how can i change the src in <embed> using javascript that works in firefox?

ex.

<embed src="music.mid">

- how can i change "music.mid" to another midi file.

  • 6 Contributors
  • 6 Replies
  • 5K Views
  • 7 Years Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Older Firefox builds often did not reinitialize plugin content when you only changed embed.src or used setAttribute("src", ...). If you find the new MIDI does not load, force a fresh plugin load by replacing the element node (which triggers reparse and plugin reinit), rather than mutating the existing one.

function swapEmbedSrc(id, url) {
  var el = document.getElementById(id);
  if (!el) return;
  var clone = el.cloneNode(true);
  // Bust cache so the plugin actually reloads the new resource
  var newUrl = url + (url.indexOf("?") === -1 ? "?" : "&") + "t=" + Date.now();
  clone.setAttribute("src", newUrl);
  el.parentNode.replaceChild(clone, el);
}

Call swapEmbedSrc("myMidi", "newfile.mid"); when you need to switch tracks. This pattern avoids relying on browser-specific behavior for live attribute changes and is broadly compatible. If you pass the path from an onclick handler, remember setAttribute returns undefined; if the plugin exposes methods (e.g., Play()), call them on the embed element itself after replacement, not on the return value of setAttribute.

Note that modern browsers generally do not natively play .mid files via HTML media elements; many have also reduced plugin support. If you need cross-browser playback today, consider converting to audio formats supported by <audio> (e.g., MP3/OGG) as listed on MDN media formats or use a Web Audio–based MIDI synth. For reference on the element and DOM APIs used here, see MDN: <embed>, cloneNode, and replaceChild.

Recommended Answers

All 6 Replies

Member Avatar for tgreer

First, I don't work much with embeds, so this is speculation. But you need to give your element an ID, as such:

<embed id="myMidi" src="music.mid">

Then, you can get to the object using document.getElementById("myMidi") . At that point, try simply changing the source:

document.getElementById("myMidi").src = "newfile.mid";
Member Avatar for hari123

<embed id="myMidi" src="music.mid">
document.getElementById("myMidi").src = "newfile.mid";

Hi, I already use this case but the embed object c'not accept the src.
there is my problem.

Member Avatar for tgreer

The "embed" tag may not allow that. What you may have to do instead is place the tag into a div, and then use JavaScript to completely rewrite the contents of the div. Research ".innerHTML".

Member Avatar for Voynex

There is a solution:

var oEmbed = document.getElementById("myMidi");
oEmbed.setAttribute("src", "newfile.mid")

Member Avatar for thepulsiphyer

anyone know how to make that part where you said "newfile.mid" be a variable as well? i mean something like

function myFunction(variable) {
object = element.setAttribute("src", variable); 
object.Play();
}

html: 

<font size="5" onclick="myFunction('filepath/file.ext');">text1</font>
<font size="5" onclick="myFunction('filepath/file2.ext');">text2</font>
etc....

<embed src="" ></embed>

would this work?

Member Avatar for Taywin

Mod, delete this please... Necro post (old old)!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.