Question

I have an html5 video on a page and an audio file I would like to use as background music. Is it possible to have the audio controls tied into the video controls (mute, volume, play, pause, etc..). The audio cannot be part of the video file because the video pauses and I’d still like the background music to play and loop.

<video id="video" data-setup="{}" >
  <source src="video/MyVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="video/MyVideo.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="video/MyVideo.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <p>Your browser doesn't support HTML5. Maybe you should upgrade.</p>
</video>

<audio id="music" loop="loop">
    <source src="audio/background.ogg" type="audio/ogg" />
    <source src="audio/background.mp3" type="audio/mpeg" />
    <source src="audio/background.wav" type="audio/wav" />
    <p> Your browser doesn't support HTML5.  Maybe you should upgrade.</p>
</audio>

        <input type="button" value="PLAY" id="playpause" onclick="playOrPause()" class="button_play">
        <input type="button" value="Mute" id="mutebutton" onclick="muteOrUnmute()" class="button_play">
        <input type="button" value="+" onclick="document.getElementById('video').volume+=0.2" class="button">
        <input type="button" value="-" onclick="document.getElementById('video').volume-=0.2" class="button">

and some JavaScript

    function playOrPause() {
        if (video.ended || video.paused) {
            video.play();
            document.getElementById("playpause").value="PAUSE";
        } else {
            video.pause();
            document.getElementById("playpause").value="PLAY";
                }   
        }

    var m = document.getElementById('mutebutton')[0];
    video.onvolumechange = function(e) {
    mutebutton.value = video.muted ? 'Unmute' : 'Mute';
        }


    function muteOrUnmute() {
        if (video.muted) {
            video.muted = false;
            document.getElementById("mutebutton").value="Mute";
        } else {
            video.muted = true
            document.getElementById("mutebutton").value="Unmute";
                }   
                return false;
        }

I’m new to JavaScript and html5 so any help would be appreciated.

Answer 1

Ok so I made a variable for my music

var a =document.getElementById("music");

and to connect the play functions together I added. a.play() to my play button and for the mute/unmute buttons I did this

function muteOrUnmute() {
        if (video.muted) {
            video.muted = false;
            a.muted = false;
            document.getElementById("mutebutton").value="Mute";
        } else {
            video.muted = true;
            a.muted = true;
            document.getElementById("mutebutton").value="Unmute";
                }   
                return false;
        }

For the volume up and down controls I did this:

    <input type="button" value="+" onclick="document.getElementById('video').volume+=0.2; document.getElementById('music').volume+=0.1" class="button">
    <input type="button" value="-" onclick="document.getElementById('video').volume-=0.2; document.getElementById('music').volume-=0.1" class="button">