Question

我需要一些帮助，如果我过于复杂的事情，我不会，但我基本上有一个音乐播放器我正在努力，有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>

Answer 1

也许唯一需要的是将音量 - 已经设置 - 应用于新的被叫歌曲，看看变化：

$('.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();
 });

音量滑块

1 个答案: