Question

我的问题如下：

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

仅在点击的元素上切换4个类（.o-1，.o-2，.o-3，.o-4），因此不透明度会在每次点击时增加，当它达到.o-4时它可以追溯到.o-1
音频音量应该相同：第一个值/起始点为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属性来存储实际的＆＃34;级别＆＃34;每个元素的价值。

我没有触摸您的HTML或CSS。你现在有一个很好的入门脚本可供使用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

编辑（关于更顺畅地更改音量的红利问题）

所以这部分会改变：

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
}

＆＃34;申请量＆＃34;将是：

// 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/

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

2 个答案: