0

I'm creating an audio player with custom playback and volume controls. I have created a mute toggle and volume slider that works fine in Chrome but not in Firefox. I saw THIS link and it looks like this may be a bug that has YET to be resolved.

HTML:

<audio id="audio" style="width:800px;">
    <source src="video/NMGTT.mp3" type="audio/mp3">
</audio>
<div id="media-controls">
    <button type="button" id="play-pause" class="paused" >PLAY/PAUSE</button>
    <button type="button" id="rewind10" >REWIND 10 SECONDS</button>
    <button type="button" id="loop" >LOOP</button>
    <input id="seekslider" type="range" min="0" max="100" value="0">
    <span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
    <div id="fullVolume">
        <button id="mutebtn" >MUTE</button>
        <div id="volumeContainer"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1" class="vertical" orient="vertical"></div>
    </div>
</div>

JS:

var track = document.getElementById('audio');
mutebtn = document.getElementById("mutebtn");
mutebtn.addEventListener("click",vidmute);

function vidmute(){
    if(track.muted){
        track.muted = false;
    } else {
        track.muted = true;
    }
}

Reminder: This issue is in FIREFOX only.

Community
  • 1
  • 1
Murphy1976
  • 1,415
  • 8
  • 40
  • 88
  • Try `track.volume = 0`, should work everywhere. – dfsq Dec 09 '14 at 19:20
  • @dfsq still not working. I have created a new variable varVolume and declared that at the beginning of my code with the value of track.volume. on the vidmute function, if track.volume == 0 is set to varVolume else track.volume is set to 0. Still no change in the volume of the audio. – Murphy1976 Dec 09 '14 at 19:30
  • How version of firefox? in Firefox/34.0 on Linux your code works! – Alessandro Marchisio Dec 09 '14 at 19:41
  • No repro: http://jsfiddle.net/vgsrL901/ (FF 34.0.5, Win 7) Does that repro the bug on your machine? If not, you have not provided enough information to solve your problem. – apsillers Dec 09 '14 at 19:41
  • @apsillers ok... here's the FULL version of my code. I am running a WEB Audio API visualizer in the mix, and have the mute code as you have suggested. what am I doing wrong? http://jsfiddle.net/yt94feor/7/ – Murphy1976 Dec 09 '14 at 20:02
  • @Murphy1976 That completely fails to play at all for me in Firefox. Is that what you're seeing as well, or is your problem only with muting? Do I need to turn on any experimental flags? – apsillers Dec 09 '14 at 20:08
  • @apsillers it fails for me as well... but if you see here (http://jsfiddle.net/yt94feor/8/) I have removed ALL Canvas elements and coding and the MUTE functionality is still not working – Murphy1976 Dec 09 '14 at 20:11
  • @apsillers, scratch that one. I got it working here. http://jsfiddle.net/murphy1976/yt94feor/10/ But I don't understand why when I add the canvas elements, it stops working... – Murphy1976 Dec 09 '14 at 20:22
  • OK... I think I may have found the culprit. I had an eventListener, that hooked the canvas itself. If you CLICKED on the canvas, then the track would pause or play.... (same function as the PlayBTN), would anyone know why that would gum up the works? I would still like to have the functionality where you click on the canvas and it pauses the track. http://jsfiddle.net/murphy1976/yt94feor/11/ – Murphy1976 Dec 09 '14 at 20:25
  • @Murphy1976 Version 11 doesn't work for me at all again. Is your problem with it not playing at all, or with it not muting? Now that I think about it, the non-playing might be a same-origin problem (reading audio data from jplayer.org is probably disallowed by the same-origin policy). In version 10, the console says you have an error on the line `canvas.addEventListener("click",playPause);` -- `canvas` is not defined, so script stops there and the other buttons are never assigned listeners.(Note in version 10 none of the other buttons works, either.) – apsillers Dec 09 '14 at 20:28
  • Possibly related: [Why aren't Safari or Firefox able to process audio data from MediaElementSource?](http://stackoverflow.com/questions/13958158/why-arent-safari-or-firefox-able-to-process-audio-data-from-mediaelementsource) Is your problem that audio does not play at all, or that you cannot mute the audio? – apsillers Dec 09 '14 at 20:34
  • @apsillers, the initial issue was just for the MUTE button not working. I guess I should probably bring up a new issue with my canvas gumming things up... – Murphy1976 Dec 09 '14 at 20:37

0 Answers0