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

Posted 2023-02-25

技术标签:

【中文标题】jquery 音频播放器 - 下一个功能问题【英文标题】：jquery audio player - next function problems 【发布时间】：2016-02-14 22:04:09 【问题描述】：

我需要帮助。每当按下下一个按钮时，播放器将正常播放并显示下一首曲目，但是，进度条和持续时间无法正常工作。当它应该保持之前的设置时，音量也会增加到 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;
);

我确定它是我的代码的顺序，但我不确定如何修复它。

任何帮助都将不胜感激。

谢谢。

【问题讨论】：

麻烦的代码请贴在这里，仅jsFiddle的链接是不够的。 【参考方案1】：

我想通了。我的事件监听器放错了地方。

【讨论】：

以上是关于jquery 音频播放器 - 下一个功能问题的主要内容，如果未能解决你的问题，请参考以下文章

使用 HTML5 音频和 jQuery 对调用对象 (this) 的引用

jQuery确定音频是不是播放完毕并在此之后触发功能

Android 音频播放——AudioTrack直接播PCMMediaPlayer播媒体文件可以是audio

在 HTML5 中使用音频标签时如何避免主播重新播放音乐？

从视频制作音频播客的服务？ [关闭]

在没有用户交互jquery的情况下播放音频