Question

I need some help, I don't if im over complicating things but I basically have a music player im working on that has 2 tracks. and i have a volume slider im using. when i slide my slider the volume will change they way it should. but when i click on next for the next track to load the volume resets on the music player, . but my slider value stays the same and if i slide my volume afterwords it will update. how can i get the music player to automatically set its volume to my slider values from start when I click on next.

if this sound confusing i put all my code on here so you can check it out. theirs two players for each track so u can see what im talking about. basically if my silder is moved to 0 meaning no sound. each track should be on 0. so if click next, that track should be set to 0 automatically once its loaded. 

<!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>
Was it helpful?

Solution

Perhaps the only thing needed is to apply the volume - that was already set - to the new called song, take a look in the changes:

$('.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();
 });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top