jQuery - 複数のオーディオエレメントと音量コントロール

Question

私の問題は次のとおりです：

私は4つの要素を持っています。すべての要素には、自動再生とループがオンになっているオーディオファイルが含まれています。私は何を達成したいことはある：ただクリックした要素の4クラス（.oの-1、.oの-2、.oの-3、.oの-4）との間に

1. トグル、不透明度はすべての上で増加しますので、クリックして.o-4に到達すると、.o-1
2. オーディオの音量は同じにする必要があります：最初の値/開始点は0、最初のクリック後は0.333になり、2番目の値は0.666、3番目は1です。最後の値/ 4回目のクリックで、再度ミュートする必要があります。ここで

   * { 
    
       box-sizing: border-box; 
    
   } 
    
   
    
   body { 
    
       padding: 0; 
    
       margin: 0; 
    
   } 
    
   
    
   .player { 
    
       display: flex; 
    
       flex-wrap: wrap; 
    
       position: relative; 
    
       margin: auto; 
    
       top: 50vh; 
    
       transform: translateY(-50%); 
    
       width: 256px; 
    
       height: 256px; 
    
       background-color: hsla(0, 0%, 80%, 1); 
    
   } 
    
   
    
   .element { 
    
       padding: 8px; 
    
       width: 128px; 
    
       height: 128px; 
    
       background-color: hsla(0, 0%, 60%, 1); 
    
   } 
    
   
    
   .o-1 {opacity: 0.2;} 
    
   .o-2 {opacity: 0.4;} 
    
   .o-3 {opacity: 0.6;} 
    
   .o-4 {opacity: 0.8;}

   <div class="player"> 
    
       <div class="element"> 
    
        <audio autoplay loop> 
    
         <source src="blabla-1.mp3" type="audio/mpeg"> 
    
        </audio> 
    
       </div> 
    
       <div class="element"> 
    
        <audio autoplay loop> 
    
         <source src="blabla-2.mp3" type="audio/mpeg"> 
    
        </audio> 
    
       </div> 
    
       <div class="element"> 
    
        <audio autoplay loop> 
    
         <source src="blabla-3.mp3" type="audio/mpeg"> 
    
        </audio> 
    
       </div> 
    
       <div class="element"> 
    
        <audio autoplay loop> 
    
         <source src="blabla-4.mp3" type="audio/mpeg"> 
    
        </audio> 
    
       </div> 
    
   </div>

はdemoです。

ありがとうございます！

Answer 1

ここでは、クラスを一切使用せずにopacityとオーディオボリュームを一度に変更するためのスクリプトです。

代わりに、各要素の実際の「レベル」値を格納するためにいくつかのdata属性を使用します。

あなたのHTMLやCSSには触れていません。 これで遊ぶには素晴らしいスタータースクリプトがあります。

// Set a level to each data attribute elements (to start with). 
 
$(".element").each(function(){ 
 
    $(this).data("opacityLevel","0.8"); 
 
    $(this).data("volumeLevel","1"); 
 
}); 
 

 
// On click, check the level. 
 
$(".element").on("click", function(){ 
 
    
 
    var opacityLevel = parseFloat($(this).data("opacityLevel")); 
 
    console.log("Opacity before: "+opacityLevel); 
 
    
 
    var volumeLevel = parseFloat($(this).data("volumeLevel")); 
 
    console.log("Volume before: "+volumeLevel); 
 
    
 
    // Increment it and ensure to stay between 0.2 and 0.8 
 
    opacityLevel += 0.2; 
 
    if(opacityLevel == 1){ 
 
    opacityLevel = 0.2; 
 
    } 
 
    
 
    if(opacityLevel >= 0.4){ 
 
    volumeLevel +=0.3333 
 
    }else{ 
 
    volumeLevel = 0 
 
    } 
 
    
 
    // Store new levels 
 
    $(this).data("opacityLevel",opacityLevel); 
 
    $(this).data("volumeLevel",volumeLevel); 
 
    
 
    console.log("Opacity after: "+opacityLevel); 
 
    console.log("Volume after: "+volumeLevel); 
 
    
 
    // Apply the new level to opacity and audio volume. 
 
    $(this).css("opacity",opacityLevel); 
 
    $(this).find("audio")[0].volume = volumeLevel; 
 
    
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.player { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    position: relative; 
 
    margin: auto; 
 
    top: 50vh; 
 
    transform: translateY(-50%); 
 
    width: 256px; 
 
    height: 256px; 
 
    background-color: hsla(0, 0%, 80%, 1); 
 
} 
 

 
.element { 
 
    padding: 8px; 
 
    width: 128px; 
 
    height: 128px; 
 
    background-color: hsla(0, 0%, 60%, 1); 
 
} 
 

 
.o-1 {opacity: 0.2;} 
 
.o-2 {opacity: 0.4;} 
 
.o-3 {opacity: 0.6;} 
 
.o-4 {opacity: 0.8;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="player"> 
 
    <div class="element"> 
 
    <audio autoplay loop> 
 
     <source src="blabla-1.mp3" type="audio/mpeg"> 
 
    </audio> 
 
    </div> 
 
    <div class="element"> 
 
    <audio autoplay loop> 
 
     <source src="blabla-2.mp3" type="audio/mpeg"> 
 
    </audio> 
 
    </div> 
 
    <div class="element"> 
 
    <audio autoplay loop> 
 
     <source src="blabla-3.mp3" type="audio/mpeg"> 
 
    </audio> 
 
    </div> 
 
    <div class="element"> 
 
    <audio autoplay loop> 
 
     <source src="blabla-4.mp3" type="audio/mpeg"> 
 
    </audio> 
 
    </div> 
 
</div>

EDIT（よりスムーズに音量変更はボーナスの質問）

だから、この部分は変更します。これに

if(opacityLevel >= 0.4){ 
    volumeLevel +=0.3333 
}else{ 
    volumeLevel = 0 
} 

を：

var volumeChangeDelay; 
if(opacityLevel >= 0.4){ 
    volumeLevel +=0.3333 
    volumeChangeDelay = 2000; // Slow increase 
}else{ 
    volumeLevel = 0; 
    volumeChangeDelay = 500; // Faster decrease 
} 

そして、 "適用量は、" 次のようになります。

// Apply the new level to opacity and audio volume. 
$(this).css("opacity",opacityLevel); 
$(this).find("audio").animate({"volume":volumeLevel},volumeChangeDelay); 

私はCodePenでそれを働きました。

Answer 2

質問をする前に、次回JSを実行してください。これは最善の方法ではありませんが、時間を最小限に抑えました。

https://jsfiddle.net/Ljpb8wk3/2/

あなたが必要なすべてはクリックでものを変更することでした。もう一度、これを学んでください。

$(targetDiv).removeClass('o-1').addClass('o-2'); 
var audioFile = $(targetDiv).find('audio'); 
audioFile[0].volume=0.4; 

オーディオタグの正しい選択方法を使って作業してください。 https://jsfiddle.net/Ljpb8wk3/4/