将JS音量控制附加到多个Audiojs音频播放器

Question

我正试图为音频播放器创建一个音量滑块。我已经成功地创建了滑块并将其绑定到音频播放器，但我的问题是它只适用于播放机的第一个实例。我认为它需要某种循环来查找音频播放器的所有实例，但我在编写循环时遇到了困难。

在my head标记中运行的javascript是：

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');
            },
        });
    });
}); 

我需要一个在所有现代浏览器上兼容的解决方案。我在github 这里中有完整的文件。

Answer 1

我不能使用您的audio.min.js，但在https://cdnjs.cloudflare.com/ajax/libs/audiojs/1.0.1/audio.js的工作示例中使用了宿主版本

在我的工作示例中，我也不能使用您的图像。所以我希望这对你来说很容易适应你的个人代码。

工作示例：https://jsfiddle.net/Twisty/qx4Lzu9d/4/

<div id="audio">
  <div class="audio-item">
    <span class="podcast-type">Audio Summary</span>
    <br />
    <p><strong>Defining the Optimal Interval for Colonoscopic Screening in Individuals with a Family History of Colorectal Cancer</strong>
      <br />
      <em>By Matthew B. Yurgelun</em></p>
    <audio id="player_1" src="https://traffic.libsyn.com/jcopodcast/Yurgelun.mp3" preload="auto"></audio><div id="vol_1" class="volume-button" data-level="50" data-min="0" data-max="100" data-player-id="1">Volume</div>
    <span class="podcast-type">November 2, 2015</span>
    <p><strong>Related Article:</strong>&nbsp; <a class="related" href="https://jco.ascopubs.org/content/early/2015/10/26/JCO.2015.62.2035" target="blank">Hennick et al</a></p>
  </div>
  <hr />
  <div class="audio-item">
    <span class="podcast-type">Art of Oncology</span>
    <br />
    <p><strong>The Emerging Role of Gallium-68 Somatostatin-Receptor PET Imaging in Neuroendocrine Tumors</strong>
      <br />
      <em>By Jonathan R. Strosberg</em></p>
    <audio id="player_2" src="https://traffic.libsyn.com/jcopodcast/Strosberg.mp3" preload="auto"></audio><div id="vol_2" class="volume-button" data-player-id="2">Volume</div>
    <span class="podcast-type">Decenber 28, 2015</span>
    <p><strong>Related Article:</strong>&nbsp; <a class="related" href="https://jco.ascopubs.org/content/early/2015/12/24/JCO.2015.64.0987" target="blank">Sadowski et al</a></p>
  </div>
</div>

在这里，您可以看到，我添加了一个div来为每个播放器创建一个音量按钮。我还谈到了id问题。因此，每个播放器都有一个唯一的ID和一个与其相关联的音量按钮。

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;
}

只对这个例子做一些小的修改。

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 = $("<div>", {
      class: "slide-wrapper"
    });
    var vslide = $("<div>", {
      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
    });
  });
});

首先，我将jQuery UI项的加载与AudioJS分开。由于我们希望能够使用audio属性，似乎最好让它们在创建UI元素之前先加载。

假设页面可能包含我们希望为其创建卷按钮的一个或多个audio元素，我将创建一个广泛的初始化并使用类选择器。这些返回到按钮的data-player-id属性，以知道要控制哪个播放器。另外，每个卷滑块都是动态创建的，并将从与其关联的播放机读取当前的volume属性。

有条件地，当单击按钮时，我们将删除任何现有的包装器及其滑块。

创建一个可选的包装器div，以便与滑块一起使用。可以帮助定位和造型。

创建一个滑块div，获取播放器ID和当前卷级别。然后初始化UI滑翔机。我选择了一个垂直方向来取乐。由于volume属性需要介于0和1之间，所以我将min和max设置为0和100，将值设置为audio.volume * 100。这将确保我们在滑块上得到正确的表示。

在slide上，我们调整值并将其传递给audio元素：audio.volume = ui.value / 100;

在stop上，我们删除滑块。

它将被追加到音量按钮之后并定位。