Member Avatar for StephenopolousINC

This simple code changes sounds in firefox, IE, safari, and chrome but will not switch in Opera. Any thoughts?

<div id="playlist"style="position: absolute; z-index:10001; top: 0px; width: 100%; height: 100%;">

    <button id="one" onclick="song1();">Mello</button>        
    <button id="two" onclick="song2();">Its Time</button>         
    <button id="three" onclick="song3();">Its on now</button>

<div id="hideme" style="width: 392px">
    <audio id ="audio" controls loop>
        <source id="oggSource" src="sounds/Starset.ogg" type="audio/ogg">
        <source id="mp3Source" src="sounds/Starset.mp3" type="audio/mpeg">  
        Your browser does not support the audio element.
    </audio>     
</div>
</div>
Edited by Dani because: Formatting fixed
  • 1 Contributor
  • 1 Reply
  • 298 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by StephenopolousINC

Dani AI

Generated

— probable cause and a reliable fix.

Symptoms: each handler in the thread assigns the audio element’s source more than once and also mixes use of <source> children and the element’s src property. Different browsers resolve those patterns differently; Opera has been known to behave inconsistently when sources are changed that way. The simple rule that removes cross‑browser surprises is: set a single playable source (or update the <source> elements and then reload), pause, call load(), then play().

A robust pattern that chooses the best format and forces a clean reload:

function playTrack(name) {
  var audio = document.getElementById('audio');
  audio.pause();

  var ogg = 'sounds/' + name + '.ogg';
  var mp3 = 'sounds/' + name + '.mp3';

  if (audio.canPlayType('audio/ogg; codecs="vorbis"')) {
    audio.src = ogg;
  } else if (audio.canPlayType('audio/mpeg')) {
    audio.src = mp3;
  } else {
    // fallback: change <source> nodes then reload
    document.getElementById('oggSource').setAttribute('src', ogg);
    document.getElementById('mp3Source').setAttribute('src', mp3);
  }

  audio.load();
  audio.play();
}

Quick troubleshooting checklist (use the browser console and Network tab):

  • Confirm each file URL returns 200 and the correct Content-Type (audio/ogg, audio/mpeg).
  • Try loading the file directly in Opera to rule out encoding/codec issues.
  • Make sure playback is from a user gesture (button click) — some versions block programmatic autoplay.
  • If changing <source> attributes, recreate/remove then append new <source> nodes before calling load(); some engines cache the original children.
  • As a last resort, replace the entire <audio> element with a fresh one via DOM to force a full reset.

Summary: stop overwriting src repeatedly, pick the correct format with canPlayType, call load() after the change, and Opera should switch tracks reliably.

Member Avatar for StephenopolousINC

Sorry I forgot to post the Javascript:

<script>

var song1 = function () {
document.getElementById('audio').src = 'sounds/Starset.ogg';
document.getElementById('audio').src = 'sounds/Starset.mp3';


var audioEl = document.getElementById("audio");

            audioEl.load();
            audioEl.play();
}
var song2 = function() {
document.getElementById('audio').src = 'sounds/jt.ogg';
document.getElementById('audio').src = 'sounds/jt.mp3';

var audioEl = document.getElementById("audio");

            audioEl.load();
            audioEl.play();
}
var song3 = function() {
document.getElementById('audio').src = 'sounds/dtd.ogg';
document.getElementById('audio').src = 'sounds/dtd.mp3';

var audioEl = document.getElementById("audio");

            audioEl.load();
            audioEl.play();
}

</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.