Блог

Главная - Вопросы по программированию - Как непрерывно воспроизводить песни в HTML и JavaScript

Как непрерывно воспроизводить песни в HTML и JavaScript

#javascript #html #jquery #css #html5-audio

#javascript #HTML #jquery #css #html5-аудио

Вопрос:

У меня проблема с моим кодом JavaScript, я использую кнопки для воспроизведения песен, паузы, остановки, следующей песни, предыдущей песни, все кнопки работают. Но проблема в том, что песни не воспроизводят автоматически следующую песню. Я нажимаю кнопку «Далее», затем она воспроизводится, иначе следующая песня автоматически не воспроизводится. Помогите мне …!

Index.html

 <div id="container">
      <div id="audio_image">
          <img class="cover">
      </div>
      <div id="audio_player">
          <div id="audio_info">
              <span class="artist"></span> - <span class="title"></span>
          </div>
          <div id="tracker">
            <div id="progress-bar">
                <span id="progress"></span>
            </div>
            <span id="duration">0:00</span>
        </div>
          <div id="button">
              <span>
                  <button id="prev"></button>
                  <button id="play"></button>
                  <button id="pause"></button>
                  <button id="stop"></button>
                  <button id="next"></button>
              </span>
          </div>
          <div class="clearfix"></div>
          <div class="wrapper">
            <input id="volume" type="range" min="0" max="100" step="1"/>
            <label class="visually-hidden" for="volume">Volume</label>
          </div>
          <div class="clearfix"></div>
          <ul id="playlist" class="hidden">
              <li song="RAAKKALAM.mp3" cover="cover1.jpg" artist="Christmas Songs">RAAKKALAM</li>
              <li song="AARPARIPPOM.mp3" cover="cover1.jpg" artist="Christmas Songs">AARPARIPPOM</li>
              <li song="ADI KALAI.mp3" cover="cover1.jpg" artist="Christmas Songs">ADI KALAI</li>
              <li song="IMMANUEL.mp3" cover="cover1.jpg" artist="Christmas Songs">IMMANUEL</li>
              <li song="AARIRO.mp3" cover="cover1.jpg" artist="Christmas Songs">AARIRO</li>
              <li song="IYAYA NAAN.mp3" cover="cover1.jpg" artist="Christmas Songs">IYAYA NAAN</li>
              <li song="JENITHAR.mp3" cover="cover1.jpg" artist="Christmas Songs">JENITHAR</li>
              <li song="KANDEN.mp3" cover="cover1.jpg" artist="Christmas Songs">KANDEN</li>
              <li song="KARIRUL.mp3" cover="cover1.jpg" artist="Christmas Songs">KARIRUL</li>
              <li song="KARTHAVE.mp3" cover="cover1.jpg" artist="Christmas Songs">KARTHAVE</li>
              </ul>
      </div>
  </div>

Main.js

 var audio;

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

initAudio($('#playlist li:first-child'));

function initAudio(element){
  var song = element.attr('song');
  var title = element.text();
  var cover = element.attr('cover');
  var artist = element.attr('artist');

  audio = new Audio('music/Christmas/Keerthanaigal/' song);

  $('.artist').text(artist);
  $('.title').text(title);

  $('img.cover').attr('src','images/covers/' cover);

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

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

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

$('#stop').click(function(){
  audio.pause();
  audio.currentTime=0;
  $('#play').show();
  $('#pause').hide();
});

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

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

$('#playlist li').click(function(){
  audio.pause();
  initAudio($(this));
  audio.play();
  showDuration();
});

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

function showDuration(){
  $(audio).bind('timeupdate',function(){
    var s=parseInt(audio.currentTime%60);
    var m=parseInt(audio.currentTime/60)%60;
    if(s<10){
      s='0' s;
    }
    $('#duration').html(m ':' s);
    var value=0;
    if(audio.currentTime>0){
      value=Math.floor((100/audio.duration)*audio.currentTime);
    }
    $('#progress').css('width',value '%');
  });
} 
 *{
  margin: 1%;
  padding: 0%;
  border: none;
  outline: none;
}
body{
  font-family: cursive;
  font-size: 13px;
  line-height: 1.5em;
  color: ghostwhite;
  background: #336699;
  }
h1{
  text-align: center;
  text-shadow: #336699;
}
.clearfix{
  clear: both;
}
#container{
  width: 330px;
  min-height: 400px;
  background: #336699;
    overflow: auto;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 10px 8px -8px #339999;
}
#audio_image{
  position: relative;
  overflow: hidden;
  width: 330px;
  height: 200px;
  margin: 0px auto;
  border-radius: 10px;
}
#audio_image.cover{
  width: 100%;
}
#audio_info{
  text-align: center;
}
#audio_info.artist{
  font-size: 15px;
  font-weight: bold;
}
.wrapper {
  position: relative;
  margin: 1rem;
}
#buttons{
  width: 90%;
  display: block;
  margin: 15px auto;
  margin-left: 23px;
  overflow: auto;
}
button#play{
  width: 70px;
  height: 70px;
  background:url(../images/play.png) no-repeat;
  float: left;
  margin-left: 0px;
}
button#pause{
  width: 70px;
  height: 70px;
  background:url(../images/pause.png) no-repeat;
  float: left;
  margin-left: 0px;
}
button#stop{
  width: 70px;
  height: 70px;
  background:url(../images/stop.png) no-repeat;
  float: left;
  margin-left: 3px;
}
button#prev{
  width: 70px;
  height: 70px;
  background:url(../images/prev.png) no-repeat;
  float: left;
  margin-top: 15px;
}
button#next{
  width: 70px;
  height: 70px;
  background:url(../images/next.png) no-repeat;
  float: right;
  margin-top: 15px;
}
#tracker{
  position: relative;
  width: 100%;
}
#progress-bar{
  width: 75%;
  margin-left: 2%;
  margin-bottom: 20px;
  margin-top: 9px;
  height: 12px;
  background: aqua no-repeat;
  border-radius: 5px;
  float: left;
}
#progress{
  background: white no-repeat;
  border-radius: 5px;  
  height: 10px;
  display: inline-block;
}
#duration{
  position: absolute;
  top: 0;
  right: 10px;
  padding: 4px 8px;
  background: black;
  border-radius: 5px;
}
#playlist{
  list-style: none;
}
#playlist li{
  cursor: pointer;
  margin: 5px;
}
#playlist li.active{
  font-weight: bold;
  padding: 3px;
  background: slategrey;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Комментарии:

1. Воспроизводится ли песня при загрузке страницы?

2. Существуют события, генерируемые при запуске и остановке воспроизведения элемента. Вы можете подключить событие остановки, чтобы воспроизвести следующий элемент.

Ответ №1:

 
aud.onended = function() {
        stop();
        nextsong();
        aud.play();
        };

это то, что я сделал на своем веб-сайте музыкального проигрывателя.