多个音频播放器的多个音量滑块
Multiple volume sliders for multiple audio players
我正在尝试为每个音频播放器制作一个音量滑块(例如 4 个音频播放器的 4 个音量滑块),例如 https://deepfocus.io/,到目前为止,多亏了 deepak,我有一个代码可以 play/pause 并改变不同音频播放器的音量。但我想用播放和暂停图像替换播放和暂停书面按钮,这是代码:
Javascript:
$('.play').click((e) => {
var _this = e.target;
var id = _this.id;
$(_this).toggleClass('active');
if ($(_this).hasClass('active')) {
$(_this).text('Pause');
document.getElementById(`sound${id}`).play();
} else {
$(_this).text('Play');
document.getElementById(`sound${id}`).pause();
}
})
function setVolume(id, value) {
var audio = document.getElementById(`sound${id}`);
audio.volume = value / 100;
};
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="play" id="1">Play</button>
<audio id="sound1" loop>
<source src="https://www.partnersinrhyme.com/files/sounds1/MP3/ambience/oceansrfs/SEASHORE.mp3" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(1, this.value)" />
</div>
<div>
<button class="play" id="2">Play</button>
<audio id="sound2" loop>
<source src="https://rainymood.com/audio1112/0.m4a" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(2,this.value)" />
</div>
PS:我对Javascript一无所知,先谢谢了!
在您的情况下,只需使用 img
而不是按钮,并使用 jquery 切换图像来源:
$('.button').click((e) => {
var _this = e.target;
var id = _this.id;
if (!$(_this).hasClass('play')) {
$(_this).attr('src', 'https://image.freepik.com/free-icon/pause-button_318-30027.jpg');
document.getElementById(`sound${id}`).play();
} else {
$(_this).attr('src', 'https://image.freepik.com/free-icon/play-alt_318-2156.png');
document.getElementById(`sound${id}`).pause();
}
$(_this).toggleClass('play');
})
function setVolume(id, value) {
var audio = document.getElementById(`sound${id}`);
audio.volume = value / 100;
};
img {
width: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img class="button" src="https://image.freepik.com/free-icon/play-alt_318-2156.png" id="1" />
<audio id="sound1" loop>
<source src="https://www.partnersinrhyme.com/files/sounds1/MP3/ambience/oceansrfs/SEASHORE.mp3" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(1, this.value)" />
</div>
<div>
<img class="button" src="https://image.freepik.com/free-icon/play-alt_318-2156.png" id="2" />
<audio id="sound2" loop>
<source src="https://rainymood.com/audio1112/0.m4a" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(2,this.value)" />
</div>
我正在尝试为每个音频播放器制作一个音量滑块(例如 4 个音频播放器的 4 个音量滑块),例如 https://deepfocus.io/,到目前为止,多亏了 deepak,我有一个代码可以 play/pause 并改变不同音频播放器的音量。但我想用播放和暂停图像替换播放和暂停书面按钮,这是代码:
Javascript:
$('.play').click((e) => {
var _this = e.target;
var id = _this.id;
$(_this).toggleClass('active');
if ($(_this).hasClass('active')) {
$(_this).text('Pause');
document.getElementById(`sound${id}`).play();
} else {
$(_this).text('Play');
document.getElementById(`sound${id}`).pause();
}
})
function setVolume(id, value) {
var audio = document.getElementById(`sound${id}`);
audio.volume = value / 100;
};
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="play" id="1">Play</button>
<audio id="sound1" loop>
<source src="https://www.partnersinrhyme.com/files/sounds1/MP3/ambience/oceansrfs/SEASHORE.mp3" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(1, this.value)" />
</div>
<div>
<button class="play" id="2">Play</button>
<audio id="sound2" loop>
<source src="https://rainymood.com/audio1112/0.m4a" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(2,this.value)" />
</div>
PS:我对Javascript一无所知,先谢谢了!
在您的情况下,只需使用 img
而不是按钮,并使用 jquery 切换图像来源:
$('.button').click((e) => {
var _this = e.target;
var id = _this.id;
if (!$(_this).hasClass('play')) {
$(_this).attr('src', 'https://image.freepik.com/free-icon/pause-button_318-30027.jpg');
document.getElementById(`sound${id}`).play();
} else {
$(_this).attr('src', 'https://image.freepik.com/free-icon/play-alt_318-2156.png');
document.getElementById(`sound${id}`).pause();
}
$(_this).toggleClass('play');
})
function setVolume(id, value) {
var audio = document.getElementById(`sound${id}`);
audio.volume = value / 100;
};
img {
width: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img class="button" src="https://image.freepik.com/free-icon/play-alt_318-2156.png" id="1" />
<audio id="sound1" loop>
<source src="https://www.partnersinrhyme.com/files/sounds1/MP3/ambience/oceansrfs/SEASHORE.mp3" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(1, this.value)" />
</div>
<div>
<img class="button" src="https://image.freepik.com/free-icon/play-alt_318-2156.png" id="2" />
<audio id="sound2" loop>
<source src="https://rainymood.com/audio1112/0.m4a" type="audio/mpeg"/>
</audio>
<input type="range" min="0" max="100" step="1" onchange="setVolume(2,this.value)" />
</div>