Member Avatar for DaveTheSinger

Hi Everyone
My website has a simple embedded mp3 player (start, pause, stop) which works fine in IE but I now realise it doesn't work in all the other browsers and that ActiveX is only for IE (it was a pain having to instruct visitors to allow ActiveX to run anyway).
Is there a simple piece of code to use to embed an mp3 player (buttons etc) that works in IE, Firefox & Safari (and hopefully other browsers).
I have the software to change the format of the audio if needs be.
Thanks

  • 5 Contributors
  • 6 Replies
  • 397 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by SaintAce

Dani AI

Generated

A short, practical update for (and anyone who followed this thread): stop using ActiveX or single-vendor widgets. The modern, cross‑browser approach is the HTML5 <audio> element (simple, accessible, and built into browsers), and MP3 playback is now broadly supported by current browsers — legacy players like the Yahoo Web Player have been discontinued. (developer.mozilla.org)

A minimal, reliable pattern — browser controls plus a tiny custom UI — looks like this:

<audio id="player" preload="none">
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element. <a href="song.mp3">Download</a>.
</audio>

<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>

<script>
const a = document.getElementById('player');
document.getElementById('play').addEventListener('click', () => a.play().catch(()=>{}));
document.getElementById('pause').addEventListener('click', () => a.pause());
document.getElementById('stop').addEventListener('click', () => { a.pause(); a.currentTime = 0; });
</script>

Note: play() returns a Promise and modern browsers enforce autoplay/user‑gesture rules, so handle rejections and require a user click to start audible playback. (developer.mozilla.org)

Quick troubleshooting and best practices: serve the correct MIME type (e.g., audio/mpeg for .mp3), make sure your server supports range requests (seeking), avoid mixed‑content issues by serving audio over HTTPS, and watch cross‑origin (CORS) headers if files are on another domain. Test on desktop and mobile—mobile often blocks autoplay until user interaction. (developer.mozilla.org)

If you want a uniform UI and extra features (playlist, skins, fallbacks), use a maintained library rather than a proprietary widget. MediaElement.js gives a unified, accessible UI across browsers; Howler.js is great for programmatic audio and game‑style control. Avoid Flash fallbacks — Flash was formally retired at end of 2020. If you prefer to “roll your own” (as suggested), start with the snippet above and add styling/events. (mediaelementjs.com)

Links:

Recommended Answers

All 6 Replies

Member Avatar for techite

Use this sort of code.
<html>
<body>

<p><a href="song.mp3">Play Song</a></p>
<p><a href="liar.wav">Play Text</a></p>

<script type="text/javascript" src=""></script>

</body>
</html>

commented: good response! +4
Member Avatar for JorgeM

Anytime I am working on a web page that requires a media player, i use Yahoo's media player. It can even play video files as well. Take a look here: http://webplayer.yahoo.com/

As techite mentioned in his post, you just reference their external javascript file.

Member Avatar for DaveTheSinger

Hi Guys
Thanks for your help - I wasn't aware of Yahoo's media player.
The code is straight forward, which I like!!!
I've read up on your links so I'm gonna try it and see what it looks like.
Once again many thanks for your help.
Cheers
Rock & Roll !!!
Dave

Member Avatar for JorgeM

Hey Dave, good to hear that you liked it. It works great.

Member Avatar for donald.jefferes

YaHoo Media player has been pulled - so NOW where do we go? I switched to...

<link href="" rel="stylesheet" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript" src=""></script>

...but it's buggy to say the least. Works when you click on the arrow buttons, but not when you click on the song titles.

Here's my page I've been struggling with - anyone who can help, please do!!
http://www.outofbodies.com/new-oob/music.htm

Member Avatar for SaintAce

Why don't you try making your own mp3 player script ?

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.