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

Posted 2023-02-25

【中文标题】jQuery - 多个音频元素和音量控制

【英文标题】：jQuery - Multiple audio elements and volume control

【发布时间】：2017-08-13 01:20:35

【问题描述】：

我的问题如下：

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

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

提前致谢！

【问题讨论】：

你的JS在哪里？您应该在哪里单击以更改每个单独的不透明度？那么点击block 1会增加block 1的不透明度？

是的，每个都单独。点击元素 1 将增加元素 1 的不透明度和体积。

您尝试过任何 javascript 吗？您想要实现的目标相当简单。音量可以通过（选择器）改变。volume = 0.2;

用 jQuery 试过了，但我的代码不相关 - 不幸的是我对 JS 不是很熟悉...

【参考方案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工作过。

【讨论】：

酷，感谢您的回答！但这会将音量设置为与不透明度相同的水平吗？那么如果不透明度为 0.2，那么体积值也是 0.2 吗？因为 opacity 为 0.2 时，volume 应为 0。 opacity 为 0.4 时，volume 应为 0.333，依此类推。

这里有两个不同的级别。

非常感谢！一个小问题：当你达到 opacity: 0.4 后，音频会回到 0 吗？应该是如下（o=opacity, v=volume）： o: 0.2 = v: 0, o: 0.4 = v: 0.333, o: 0.6 = v: 0.666, o: 0.8 = v: 1 然后返回到第一个。

你试过sn-p吗？控制台日志显示级别。如果不透明度不大于或等于 0.4（在 else 部分），则音量设置为零。

我用音频文件试了一下，但是平滑增加好像不行。也许我错了，但使用 jQuery 的 animate 属性不会更容易吗？你怎么看？

【参考方案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/

【讨论】：

感谢您的回答！我尝试了演示，但您的解决方案不会改变任何音频文件的音量。声音正在播放，但是当我单击声音按钮时，它不会改变音量，只会改变不透明度。 @Gezzasa 有什么建议吗？

@22_4 Louys Patrice Bessette 的上述回答对您有用吗？如果没有，我会再看看。

是的，他的回答不仅仅是一个可行的解决方案，但我希望看到不同的方法。提前感谢@Gezzasa！

没问题。我确实知道我的代码有什么问题。当使用 jQuery 选择像“音频”和“视频”这样的标签时，它会将它们全部放在一个数组中。即使只选择了一个。因此，您需要像从数组 [0] 中选择某些内容一样选择它。我很乐意重写我的代码。只需要获取一个工作音频文件即可进行测试。我上面所做的有点盲目编码。

谢谢@22_4，我修复了代码，它可以工作了:)。你的自动播放会弄乱它，因为所有 4 个都同时开始播放。