jQuery - 多个音频元素和音量控制

Question

我的问题如下：

我有四个元素。每个元素都包含一个音频文件，其中自动播放和循环打开。我想要实现的是：

1. 仅在点击的元素上在 4 个类（.o-1、.o-2、.o-3、.o-4）之间切换，因此每次点击时不透明度都会增加，当它达到.o-4 时，它就会消失回.o-1
2. 音频的音量应该这样做：第一个值/起点为 0，第一次单击后达到 0.333，第二个值为 0.666，第三个为 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/