Attaching JS volume controls to multiple Audiojs audio players

Question

I'm trying to create a volume slider for the audiojs audio player. I've successfully created the slider and bound it to the audio player, but my problem is it only works with the first instance of the player. I think it requires some sort of loop to find all instances of the audio player, but I'm having trouble writing the loop.

The javascript running in my head tag is:

audiojs.events.ready(function() {
    var as = audiojs.createAll();
    $('.slider').each(function() {
        var slider = $('.slider'),
            tooltip = $('.tooltip'),
            audioList = document.getElementsByTagName("audio").length;
        tooltip.hide();
        slider.slider({
            range: "min",
            min: 0,
            max: 100,
            value: 50,
            change: function(){
                var value = $(".slider").slider("value");
                for (var i = 0; i > audioList; i++) {
                    document.getElementById("player").volume = (value / 100);
                };
            },
            start:function(event,ui) {
                tooltip.fadeIn('fast');
            },
            slide: function(event, ui) {
                var volume = $('.volume'),
                    value = $(".slider").slider("value");
                document.getElementById("player").volume = (value / 100);
                tooltip.css('left',value / 2).text(ui.value);
                if(value <= 5) {
                    volume.css('background-position', '0 0');
                }
                else if (value <= 25) {
                    volume.css('background-position', '0 -25px');
                }
                else if (value <= 75) {
                    volume.css('background-position', '0 -50px');
                }
                else {
                    volume.css('background-position', '0 -75px');
                };
            },
            stop:function(event,ui) {
                tooltip.fadeOut('fast');
            },
        });
    });
});

I need a solution that's compatible across all modern browsers. I have the full files in github here.

Twisty · Accepted Answer

I couldn't use your audio.min.js but used a hosted version for my working example from https://cdnjs.cloudflare.com/ajax/libs/audiojs/1.0.1/audio.js

I also could not use your images in my working example. So I hope this is easy for you to adapt to your personal code.

Working Example: https://jsfiddle.net/Twisty/qx4Lzu9d/4/

HTML


  
    Audio Summary
    

    Defining the Optimal Interval for Colonoscopic Screening in Individuals with a Family History of Colorectal Cancer
      

      By Matthew B. Yurgelun
    Volume
    November 2, 2015
    Related Article:  Hennick et al
  
  
  
    Art of Oncology
    

    The Emerging Role of Gallium-68 Somatostatin-Receptor PET Imaging in Neuroendocrine Tumors
      

      By Jonathan R. Strosberg
    Volume
    Decenber 28, 2015
    Related Article:  Sadowski et al

Here you can see I have added a div to create a Volume button for each player. I have also addressed the id issue. Thus each player has a unique ID and a volume button that associates with it.

CSS

.audio-item .audiojs {
  display: inline-block;
}
.section {
  position: relative;
}

.volume-button {
  height: 36px;
  margin: 0;
  margin-top: -28px;
}

.slide-wrapper {
  background: #fff;
  position: absolute;
  width: 28px;
  height: 120px;
  border: 1px solid #333;
  border-radius: 6px;
  z-index: 100;
}

.slider {
  position: absolute;
  top: 12px;
  left: 6px;
}

Minor modifications just for this example.

jQuery

audiojs.events.ready(function() {
  var as = audiojs.createAll();
});

$(function() {
  $(".volume-button").button({
    "icon": "ui-icon-volume-on",
    "showLabel": false
  }).click(function() {
    if ($(".slide-wrapper").length) {
      $(".slide-wrapper").remove();
      return false;
    }
    var slideWrap = $("", {
      class: "slide-wrapper"
    });
    var vslide = $("", {
      class: "slider"
    });
    var pid = $(this).data("player-id");
    var player = $("#player_" + pid)[0];
    var lev = player.volume ? player.volume * 100 : 50;
    console.log("Creating Volume Slider for #player_" + pid);
    vslide.css("height", "100px");
    vslide.slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 100,
      value: lev,
      slide: function(e, ui) {
        console.log("Setting #player_" + pid + " volume to " +
          ui.value);
        player.volume = ui.value / 100;
      },
      stop: function(e, ui) {
        slideWrap.remove();
      }
    });
    slideWrap.append(vslide);
    $(this).after(slideWrap);
    slideWrap.position({
      my: "left bottom",
      at: "right bottom",
      of: "#vol_" + pid
    });
  });
});

First I separated the loading of the jQuery UI items from the AudioJS. Since we want to be able to make use of the audio attributes, it seemed best to let them load first before creating UI elements.

Assuming the page may contain 1 or more audio elements that we want to create a volume button for, I create a broad initialization and use a class selector. These refer back to the button's data-player-id attribute to know which player to control. Also each volume slider is created on the fly and will read the current volume attribute from the player it is associated with.

Conditionally, we remove any existing wrappers and their sliders when the button is clicked.

Create a wrapper div, optional, to use with the slider. Can be helpful for positioning and styling.

Create a slider div, get the player ID, and the current volume level. Then initialize the UI Slider. I picked a vertical orientation for fun. Since the volume attribute needs to be between 0 and 1, I set the min and max to 0 and 100 and the value to audio.volume * 100. This will ensure we get proper representation on the slider.

On slide, we adjust the value and pass it to the audio element: audio.volume = ui.value / 100;

On stop, we remove the slider.

It will be appended after the volume button and positioned.

Attaching JS volume controls to multiple Audiojs audio players

Answers (1)

Related Questions