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/