jQuery - 多個音頻元素和音量控制

Question

我的問題如下：

我有四個元素。每個元素都包含自動播放和循環打開的音頻文件。我想實現的是：類

1. 切換之間4（的.o-1，即.o-2，即.o-3，即.o-4）剛剛點擊元素，所以不透明度將在每個增加點擊並達到.o-4時，它會返回.o-1
2. 音頻的音量應該相同：第一個值/起點爲0，第一次點擊後達到0.333，第二個值爲0.666，第三個爲1.之後最後的值/第四次點擊音頻應該再次靜音。

* { 
 
    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>

編輯（有關更改音量更順暢獎金問題）

因此，這部分將會改變：

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/