JSボリュームコントロールを複数のAudiojsオーディオプレーヤーに接続する

Question

audiojsオーディオプレーヤー用のボリュームスライダーを作成しようとしています。私は正常にスライダを作成し、それをオーディオプレーヤーにバインドしましたが、私の問題は、プレイヤーの最初のインスタンスでのみ動作することです。私は、オーディオプレーヤーのすべてのインスタンスを見つけるために何らかの種類のループが必要だと思いますが、ループを書くのに問題があります。

私の頭のタグに実行される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 hereの完全なファイルを持っています。

Answer 1

私はあなたのaudio.min.jsを使用しますが、私はまた私の作業の例ではあなたのイメージを使用することができませんでしhttps://cdnjs.cloudflare.com/ajax/libs/audiojs/1.0.1/audio.js

から私の働い例えばホストされたバージョンを使用しませんでした。だから私はこれがあなたの個人的なコードに適応するのは簡単だと思います。

実施例：ここではhttps://jsfiddle.net/Twisty/qx4Lzu9d/4/

HTML

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

まずはAudioJSからjQueryのUI項目のロードを分離しました。 audioの属性を利用できるようにしたいので、UI要素を作成する前にまずそれらをロードさせるのが最善の方法でした。

このページには、ボリュームボタンを作成する1つ以上のaudio要素が含まれていると仮定して、幅広い初期化を作成し、クラスセレクタを使用します。これらは、ボタンのdata-player-id属性を参照して、どのプレイヤーを制御するかを知るためのものです。また、各ボリュームスライダーは、その場で作成され、関連付けられているプレーヤーから現在のvolume属性を読み取ります。

条件付きで、ボタンをクリックすると、既存のラッパーとそのスライダーが削除されます。

ラッパーを作成します。div（オプション）、スライダーと一緒に使用します。位置決めやスタイリングに役立ちます。

スライダーdivを作成し、プレーヤーIDと現在の音量レベルを取得します。その後、UIスライダを初期化します。私は楽しみのための垂直方向を選んだ。 volume属性は0と1の間にある必要があるため、最小値と最大値を0と100に、値をaudio.volume * 100に設定しました。これにより、確実にスライダを表現できます。

slideでは、我々は値を調整し、audio要素に渡し：audio.volume = ui.value/100;

stopで、我々はスライダーを削除します。

音量ボタンの後ろに付いて配置されます。