Member Avatar for suicidekyd

I have a site where i host my theme music in mp3 format , and i was wondering how could i set it up to where i could either let all the songs play one after another or randomize it.

any ideas...cause im lost :sad:

  • 3 Contributors
  • 3 Replies
  • 282 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by CocoDan

Dani AI

Generated

wanted a simple way to play hosted MP3s either sequentially or shuffled. was right to clarify that this is embedded site audio, and 's Java idea reflects older solutions — modern, cross-browser practice uses the HTML5 audio element plus a small JavaScript playlist controller (Java applets are obsolete for this). The approach: keep a track array, listen for the audio ended event, and either advance in order or serve a Fisher‑Yates shuffle order.

A minimal, practical example:

<audio id="player" controls preload="none"></audio>

<script>
const player = document.getElementById('player');
const tracks = [
  {src: 'music/track1.mp3', title: 'Theme One'},
  {src: 'music/track2.mp3', title: 'Theme Two'},
  {src: 'music/track3.mp3', title: 'Theme Three'}
];

let seq = tracks.map((_,i)=>i);
let seqPos = 0;
let shuffled = false;

function shuffleArray(a){
  for(let i=a.length-1;i>0;i--){
    const j = Math.floor(Math.random()*(i+1));
    [a[i],a[j]] = [a[j],a[i]];
  }
}

function playIndex(i){
  seqPos = i;
  player.src = tracks[seq[seqPos]].src;
  player.play().catch(()=>console.warn('Autoplay blocked'));
}

function nextTrack(){
  seqPos = (seqPos + 1) % seq.length;
  playIndex(seqPos);
}

player.addEventListener('ended', nextTrack);

function setShuffle(on){
  shuffled = !!on;
  seq = tracks.map((_,i)=>i);
  if(shuffled) shuffleArray(seq);
  seqPos = 0;
  playIndex(seqPos);
}
</script>

Notes and troubleshooting: modern browsers block autoplay with sound — require a user gesture or show controls. Offer fallback formats (OGG) for broader support and ensure the server sends correct MIME (audio/mpeg). If files are served from another domain check CORS and use encoded filenames (no raw spaces). For better mobile handling, volume control, crossfade, or sprite playback, consider a JS audio library such as Howler.js. For core behavior and attributes see the HTML audio element.

Keep background audio optional and give users visible controls — forced autoplay harms accessibility and will be blocked on many devices.

Recommended Answers

All 3 Replies

Member Avatar for suRoot

I'm not sure what you mean, do you mean you have inbeeded a background sound in your web site and you want to play them??

Member Avatar for suicidekyd

yeah thats what i mean, but ineed to make it into a list and such.

i can do a single theme , but i have no clue how to make it random or a list.

Member Avatar for CocoDan

Java...

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.