Мне нужна помощь, я не делаю, если я усложняю вещи, но у меня в основном есть музыкальный проигрыватель, у которого есть 2 трека. и я использую ползунок объема. когда я сдвигаю свой ползунок, объем изменится так, как он должен. но когда я нажимаю на следующую для следующего трека, чтобы загрузить громкость сбрасывается на музыкальный проигрыватель. но мое значение слайдера остается неизменным, и если я скрою свои тома после его обновления, он будет обновляться. как я могу заставить музыкальный проигрыватель автоматически установить его объем на мои значения слайдера от начала, когда я нажму дальше.
если этот звук запутан, я помещаю весь свой код здесь, чтобы вы могли его проверить. их двух игроков для каждого трека, поэтому вы можете видеть, о чем они говорят. в основном, если мой шелк перемещается в 0, что означает отсутствие звука. каждый трек должен быть на 0., поэтому, если щелкнуть дальше, то трек должен быть автоматически установлен на 0 после его загрузки.
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title> My audio test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="js/jquery11.js"></script>
<script>
jQuery(document).ready(function(){
i=0;
nowPlaying = document.getElementsByClassName('playsong');
nowPlaying[i].load();
volume =($(this).val(.3));
callMeta();
$('.play').on('click', function() {
nowPlaying[i].play();
callMeta();
});
$('.stop').on('click', function() {
nowPlaying[i].pause();
callMeta();
});
$('.next').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
++i;
nowPlaying[i].load();
nowPlaying[i].volume;
nowPlaying[i].play();
callMeta();
});
$('.prev').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
--i;
nowPlaying[i].load();
nowPlaying[i].play();
callMeta();
});
function callMeta() {
var trackTitle = $(nowPlaying[i]).attr('data-songtitle');
$('.songtitle').html(trackTitle);
var trackArtist = $(nowPlaying[i]).attr('data-songartist');
$('.songartist').html(trackArtist);
var albumart = $(nowPlaying[i]).attr('data-albumart');
$('img.albumart').attr('src', albumart);
}
$("input[type=range]").val($(this).val()); // set value to 6
$('#volume-bar').change(function(evt) {
nowPlaying[i].volume =($(this).val()/100);
$('#newValue').html(nowPlaying[i].volume);
});
})
</script>
</head>
<body>
<audio class="playsong" controls="controls" data-songtitle="love and fluff" data-songartist="nelly" data-albumart= "img/0qXrGPz.jpg" src="Andy Mineo.mp3">
Your browser does not support html audio tag
</audio>
<audio class="playsong" controls="controls" data-songtitle="food for fat kids" data-songartist="chubby" data-albumart= "img/Lecrae_1600x16002-400x400.jpg" src="Derek Minor.mp3">
Your browser does not support html audio tag
</audio>
<img class="albumart" src="img/Aunrey-avatar.jpeg"></img>
<div class="songartist">song title goes here</div>
<div class="songtitle">song title goes here</div>
<div class="play">Play</div>
<div class="stop">Stop</div>
<div class="next">Next</div>
<div class="prev">Prev</div>
<div class="volume">Volume</div>
<input type="range" id="volume-bar" min="0" max="100" step="0.1" value="100">
<div id="newValue" value="0">0</div>
</body>
</html>
Возможно, единственное, что нужно, - это применить уже установленный том - к новой названной песне, взглянуть на изменения:
$('.next').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
++i;
nowPlaying[i].load();
nowPlaying[i].volume =($("#volume-bar").val()/100); //changed line
nowPlaying[i].play();
callMeta();
});
$('.prev').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
--i;
nowPlaying[i].load();
nowPlaying[i].volume =($("#volume-bar").val()/100); //added line
nowPlaying[i].play();
callMeta();
});