Member Avatar for maxelcat

Hi

I have been asked to create a site for a band. They want to have a whole pile of mp3s and some sort of player. Ideally, of course, needs to work across device (and you all know I mean iPad/iPhone - so not flash).

Can anyone please recomment a suitable plugin or something that I could use.

Thanks

  • 2 Contributors
  • 2 Replies
  • 129 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by maxelcat

Dani AI

Generated

— good constraint: no Flash on iOS. is right that a plain link works, but for a band site with many tracks a lightweight HTML5 player + progressive enhancement gives a much better user experience without relying on Flash.

A practical path: use the native HTML5 <audio> element plus a tiny JS playlist, or pick a small library depending on needs. MediaElement.js or jPlayer give a ready UI and fallbacks for older desktops; SoundManager2 and Howler.js provide robust playback APIs (SoundManager2 historically offered Flash fallbacks, Howler is modern and WebAudio-based). If budget and time are tight, embedded services (SoundCloud/Bandcamp) are a quick way to get cross-device players and hosting handled for you.

Example minimal pattern (load tracks on demand, no massive preloads):

<audio id="player" controls preload="none">
  <source src="track1.mp3" type="audio/mpeg">
  <source src="track1.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>

<script>
var tracks = ['track1.mp3','track2.mp3'], i = 0, p = document.getElementById('player');
p.addEventListener('ended', function(){
  i = (i + 1) % tracks.length;
  p.src = tracks[i];
  p.play();
});
</script>

Key practical tips: serve correct MIME types (audio/mpeg for MP3), enable CORS if files come from another domain, avoid preloading many files to save bandwidth, and remember mobile browsers (especially iOS Safari) block autoplay and require a user gesture to start playback. Encode sensible bitrates (128 kbps or lower for previews) and provide a simple download link fallback for users who cannot play in-browser. Test on real iPhone/iPad models and desktop browsers to confirm behavior.

Recommended Answers

All 2 Replies

Member Avatar for fpsasm

You can aways (hyper)link the mp3 file on the html page, so it opens a new window. So:

<a href="./some-sort-of-mp3-file.mp3">Some text as a link</a>.

Then browser will take care of the rest.

I can't think of another way. Sorry :)

-cross platform is always a pain. You're probably better off doing a flash player, and then adding the href links to the mp3 files. hyperlinking will work, but it's not the most elegant solution.

is it? :)

Edited by fpsasm because: n/a
Member Avatar for maxelcat

No you're right, not very elegant - and of course the client wants it all for pocket money - don't they always.

Thanks for taking the time to reply. I have recently done a html5 video with a fallbasck to flash - based on the "video for everybody" info. I guess that could be adapted to do mp3s.

Lots ot think about!

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.