我的問題如下:jQuery - 多個音頻元素和音量控制
我有四個元素。每個元素都包含自動播放和循環打開的音頻文件。我想實現的是:類
- 切換之間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。
在此先感謝!
你的JS在哪裏?你應該點擊哪個單獨更改不透明度?所以點擊塊1會增加塊1的不透明度? – Gezzasa
是的,每個人單獨。點擊元素1將增加元素1的不透明度和音量。 –
你有沒有嘗試過任何Javascript?你想實現的是相當簡單的。音量可以改變VIA(選擇器).volume = 0.2; – Gezzasa