Javascript 音频音量滑块_Javascript_Jquery_Html_Jquery Ui

Javascript 音频音量滑块

javascript jquery html jquery-ui

Javascript 音频音量滑块,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我需要一些帮助，我不知道我是否把事情复杂化了，但我基本上有一个音乐播放器，有两首歌。我用了一个音量滑块。当我滑动滑块时，音量将按应有的方式改变。但是，当我单击“下一步”以加载下一首曲目时，音乐播放器上的音量会重置。但我的滑块值保持不变，如果我在课后滑动音量，它将更新。当我单击“下一步”时，如何让音乐播放器从开始自动将其音量设置为我的滑块值如果这听起来让人困惑，我把我所有的代码都放在这里，这样你就可以查看了。他们的每一条赛道都有两名球员，所以你可以看看我在说什么。基本上，如果我的silder移动

我需要一些帮助，我不知道我是否把事情复杂化了，但我基本上有一个音乐播放器，有两首歌。我用了一个音量滑块。当我滑动滑块时，音量将按应有的方式改变。但是，当我单击“下一步”以加载下一首曲目时，音乐播放器上的音量会重置。但我的滑块值保持不变，如果我在课后滑动音量，它将更新。当我单击“下一步”时，如何让音乐播放器从开始自动将其音量设置为我的滑块值

如果这听起来让人困惑，我把我所有的代码都放在这里，这样你就可以查看了。他们的每一条赛道都有两名球员，所以你可以看看我在说什么。基本上，如果我的silder移动到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>


我的音频测试
jQuery（文档）.ready（函数（）{
i=0；
nowPlaying=document.getElementsByClassName（'playsong'）；
正在播放[i].load（）；
体积=（$（this.val（.3））；
callMeta（）；
$（'.play'）。在（'click'，function（）{
现在玩[i].play（）；
callMeta（）；
});
$（'.stop'）。在（'click'，function（）上{
正在播放[i]。暂停（）；
callMeta（）；
});
$（'.next'）。在（'click'，function（）上{
$.each（$（'audio.playsong'），function（）{
这个。暂停（）；
});
++一,；
正在播放[i].load（）；
正在播放[i]。音量；
现在玩[i].play（）；
callMeta（）；
});
$（'.prev'）。在（'click'，function（）上{
$.each（$（'audio.playsong'），function（）{
这个。暂停（）；
});
--一,；
正在播放[i].load（）；
现在玩[i].play（）；
callMeta（）；
});
函数callMeta（）{
var trackTitle=$（nowPlaying[i]）.attr（'data-songtile'）；
$（'.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'）；
}
$（$（输入[type=range]））.val（$（this.val（））；//将值设置为6
$（“#音量栏”）.change（函数（evt）{
正在播放[i]。卷=（$（this）.val（）/100）；
$（'#newValue'）.html（nowPlaying[i].volume）；
});
})
您的浏览器不支持html音频标记
您的浏览器不支持html音频标记
歌名在这里
歌名在这里
玩
停止
下一个
上
体积
0

也许唯一需要的是将已经设置好的音量应用到新的歌曲中，看看这些变化：

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

在下一步按钮中，单击处理程序。。。做这样的事情有用吗？：nowPlaying[i].volume=（$（“#volume bar”）.val（）/100）兄弟你的救命恩人谢谢你这正是我需要做的一切我还有一个问题，你在html5音频api上真的更电影化了，因为你帮了我这么快。我很感激。@Ray请随意发送一个新问题