Question

我需要帮助。每当按下下一个按钮时，播放器将正常播放并显示下一曲目，但进度条和持续时间不能正常工作。当它应该按照先前的设置保持时，音量也会增加到100。

https://jsfiddle.net/independentlegends/zsbo58hc/

<body>
  <div id="audio_player">
    <div class="audio-info">
  <!--  <span class="artist"></span> - <span class="title"></span> -->
  </div>
  <div><a id="i-legends" target="_blank" href="http://www.independentlegends.com" class="text-center"><strong>Powered by: IndependentLegends.com</strong></a></div>

<div id="audio_controls">
  <div class="clear-fix"></div>
  <div id="audio-img">
    <img class="tapecover" src="">\
    <h2 id="playlist_status"></h2>
  </div>
  <div id="tracker">
    <span id="curduration"></span>
    <div id="progressbar">
      <span id="progress"></span>
    </div>
    <span id="duration"></span>
  </div>
  <div class="clear-fix"></div>
  <div id="buttons">
    <button id="prev"></button>
    <button id="play"></button>
    <button id="pause"></button>
    <button id="stop"></button>
    <button id="next"></button>

    <input id="volume" type="range" min="0" max="100" value="30" step="1">
    <button id="mutebtn"></button>
  </div>
</div>


</div>
<br>
<br>
<br>
<div class="clear-fix"></div>
<ul id="mylist" cover="http://www.i-legends.com/images/LostTape.jpg" artist="MaseratiBaby">
<li data-mixtrack="1. Big Mad" class="active">1. Big Mad</li>
<li data-mixtrack="2. 24.7">2. 24.7</li>
<li data-mixtrack="3. Robbins And Jordans">3. Robbins and Jordans</li>

</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>

CSS

body {
    background-color: grey;
}
div#audio_player { 
    width: 450px; 
    height: 300px; 
    background: url(images/sdeskin.png) no-repeat; 
    border-radius: 4px
}
div#audio_controls { 
    margin-left: 66px; 
    clear: both
}
div#audio_controls > #buttons > button { 
    border: none; 
    cursor: pointer; 
    outline: none; 
    display: block; 
    float: left; 
    margin: 10px 10px 0px 0px; 
}
div#audio_controls > input { 
    outline: none; 
    display: block; 
    float: left; 
    margin: 10px 10px 10px 0px; 
    border-radius: 5px
}   
#audio-img {

    overflow: hidden;
    margin: 15px 15px 0px 40px;
    padding-top: 15px;
    margin-left: 0px;

}

.tapecover {
    width: 15%;
    z-indez: 1;
    float: left;
    padding-right: 15px;
    margin-left: 2%;
}

button#prev {
    height: 20px;
    width: 20px;
    background: url(images/prev.svg) no-repeat;
    background-size: contain;
    float: left;

}

button#next {
    height: 20px;
    width: 20px;
    background: url(images/next.svg) no-repeat;
    background-size: contain;
    float: left;
}

button#stop {
    height: 20px;
    width: 20px;
    background: url(images/stop.svg) no-repeat;
    background-size: contain;
    float: left;
}

button#pause {
    height: 20px;
    width: 20px;
    background: url(images/pause.svg) no-repeat;
    background-size: contain;
    float: left;
}
button#play {
    background: url(images/play.svg) no-repeat;
    width: 20px;
    height: 20px;
    background-size: contain;
    float: left;
    border: none;

}


button#mutebtn {
    background: url(images/speaker.png) no-repeat;
    width: 20px; 
    height: 20px;
    background-size: contain;
    float: right !important;
    margin-top: 10px !important;


}

input#seekslider{
    width:100px;
}
input#volume{
    width: 70px;
    border-radius: 5px;
    float: right;
    margin-top: 13px;

}

#buttons {
    width: 260px;
    outline: none;
    margin-left: 30px;
}
#tracker {

    position: relative;
    width: 260px;
}

#progressbar {
    width: 260px;
    margin-bottom: 0px;

    margin-right; 15px;
    margin-left: 30px;
    height: 10px;
    background: url(images/progress_bg.png) no-repeat;
    float: left;
    display: inline-block;


}

#progress {

    background: url(images/progress.png) no-repeat;
    height: 10px;
    display: inline-block;
    margin-bottom: 5px;
    position: absolute;

}


#duration {
    position: absolute;
    top: -7px;
    right: -79px;
    padding: 2px 4px;
    background: black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    font-size: .7em;
    color: #09F;
    font-family: Arial, Helvetica, sans-serif;
}

#curduration {
    position: absolute;
    top: -7px;
    left: -20px;
    padding: 2px 4px;
    background: black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    font-size: .7em;
    color: #09F;
    font-family: Arial, Helvetica, sans-serif;
}


input[type='range'] {
    -webkit-appearance: none !important;
    margin:0px;
    padding:0px;
    background: #000;
    height:13px;
    border-bottom:#333 1px solid;
}
input[type='range']::-ms-fill-lower  {
    background:#000;
}
input[type='range']::-ms-fill-upper  {
    background:#000;
}
input[type='range']::-moz-range-track {
    border:none;
    background: #000;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
    border-radius:100%;
    cursor:pointer;
}
input[type='range']::-moz-range-thumb {
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
    border-radius:100%;
    cursor:pointer;
}
input[type='range']::-ms-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
    border-radius:100%;
    cursor:pointer;
}

#mylist li {
    cursor: pointer;
    background-color: black;
    color: white;
}

#mylist li.active{
    font-weight: bold;
    padding: 3px;
    background: #666;
}

#i-legends {
    clear: both;
    text-decoration: none;
    color: lightgrey;
    border-radius: 3px;
    padding: 0px 2px 0px 2px;
    font-size: 8px;
    margin-top: 210px;
    font-family: Montserrat;
    float: right;           
}

#playlist_status {
    float: left;
}
.clear-fix {
    clear: both;
}

的javascript

var audio, seeking=false;

// hide pause button
$('#pause').hide();

$('#duration').hide();
$('#curduration').hide();


//initialize
initAudio($('#mylist li.active'));
audio.addEventListener("timeupdate", updateProgress, false);
audio.addEventListener("timeupdate", showDuration, false);


// initializer function
function initAudio(element) {
    var song = element.attr('data-mixtrack');
    var title = element.text();
    var cover = element.parent().attr('cover');
    var artist = element.parent().attr('artist');

    var progress = document.getElementById("progress");

    var dir = "audio/"

    //playlist_index = 0;
    var ext = ".mp3";
    var agent = navigator.userAgent.toLocaleLowerCase();

    if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1) {
        ext = ".ogg";
    }

    //create audio object
    audio = new Audio(dir + song + ext);

    if (!audio.currentTime) {
        $('#duration').html(0.00);  
    }

    $('#playlist_status').text(title);


    //insert cover
    $('.tapecover').attr('src', cover);

    $('#mylist li').removeClass('active');
    element.addClass('active');
}

//play button
$('#play').click(function() {
    audio.play();
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    $('#curduration').fadeIn(400);
    showDuration();
});

//pause button
$('#pause').click(function() {
    audio.pause();
    $('#pause').hide();
    $('#play').show();
});

//stop button
$('#stop').click(function() {
    audio.pause();
    audio.currentTime = 0;
    $('#pause').hide();
    $('#play').show();
    $('#duration').fadeOut(400);
    $('#curduration').fadeOut(400);
}); 

// next button
$('#next').click(function() {
    audio.pause();
    var next = $('#mylist li.active').next();
    if(next.length == 0) {
        next = $('#mylist li:first-child');
    }   
    initAudio(next);
    audio.play();
    $('#play').hide();
    $('#pause').show();
    showDuration();
});

// prev button
$('#prev').click(function() {
    audio.pause();
    audio.currentTime = 0;
    var prev = $('#mylist li.active').prev();
    if(prev.length == 0) {
        prev = $('#mylist li:last-child');
    }
    initAudio(prev);
    audio.play();
    $('#play').hide();
    $('#pause').show();
    showDuration();

}); 

// Time Duration

function showDuration() {
                    var nt = audio.currentTime * (100 / audio.duration);
                    progress.value = nt;
                    var curmins = Math.floor(audio.currentTime / 60);
                    var cursecs = Math.floor(audio.currentTime - curmins * 60);
                    var durmins = Math.floor(audio.duration / 60);
                    var dursecs = Math.floor(audio.duration - durmins * 60);
                    if(cursecs < 10) { cursecs = "0" + cursecs; }
                    if(dursecs < 10) { dursecs = "0" + dursecs; }
                    if(curmins < 10) { curmins = "0" + curmins; }
                    if(curmins < 10) { durmins = "0" + durmins; }
                    curduration.innerHTML = curmins + ":" + cursecs;
                    duration.innerHTML = durmins + ":" + dursecs;
                }

function updateProgress() {

   var value = 0;
   if (audio.currentTime > 0) {
      value = Math.floor((100 / audio.duration) * audio.currentTime);
   }
   progress.style.width = value + "%";
}

// change track

$('#mylist li').click(function() {
    audio.pause();
    $('#mylist li').removeClass('active');
    $(this).addClass('active');
    initAudio($(this));
    audio.play();
    $('#play').hide();
    $('#pause').show();
    showDuration();
});

// volume

$('#volume').change(function() {
    audio.volume = parseFloat(this.value / 100);

});

$(document).ready (function() {
    audio.volume = $('#volume').attr('value') / 100;
});

我确定它是我的代码的顺序，但我不知道如何解决它。

任何帮助都会被提升。

感谢。

Answer 1

我明白了。我让我的事件听众在错误的地方。

jquery音频播放器 - 下一个功能问题

1 个答案: