вопросы Пользовательские аудио-плеер

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <style type="text/CSS"> 
      #custom{ 
       font-family: monospace; 
      font-size: 16px; 
      max-width: 650px; 
      border-style: solid; 
      border-color: black; 
      border-width: 1px; 
      border-radius: 5px; 
      padding: 8px; 
      padding-bottom: 15px; 
      padding-left: 12px; 
      padding-right: 12px; 
     } 
     img{ 
      margin-top: 3px; 
      float: left; 
     } 
     #bar, #currentTime, #duration, #skip{ 
      display: inline-block; 
     } 
     #currentTime, #duration, #skip{ 
      margin: 0px; 
      padding: 0px; 
      margin-top: 3px; 
      margin-left: 10px; 
     } 
     #bar{ 
      margin-top: 10px; 
      height: 14px; 
      width: 400px; 
      background: lightgrey; 
      border-radius: 50px; 
      margin-left: 9px; 

     } 
     #slider{ 
      height: 14px; 
      width: 15px; 
      background: black; 
      border-radius: 50px; 
     } 
    </style> 
</head> 
<body onLoad="count()"> 
    <script type="text/javascript"> 
     var track = 0; 
     function count(){  
      var music = document.getElementById("myAudio"); 
      var duration = music.duration; 
      var durationInMins = Math.floor(duration/60); 
      var durationInSecs = Math.floor(duration-(durationInMins*60)); 
       if(durationInSecs < 10){ 
        var durationInSecs = "0" + durationInSecs; 
       } 
       if(durationInMins < 10){ 
        var durationInMins = "0" + durationInMins; 
       } 
      document.getElementById("duration").innerHTML = durationInMins + ":" + durationInSecs; 
      var timer = setInterval( 
       function(){ 
        var music = document.getElementById("myAudio"); 
        var currentTime = music.currentTime; 
        if(currentTime > 60){ 
         var min = Math.floor(currentTime/60); 
         var sec = Math.floor(currentTime-(min*60)); 
        }else{ 
         var min = "0"; 
         var sec = Math.floor(music.currentTime);      } 
        if(sec < 10){ 
         var sec = "0" + sec; 
        } 
        if(min < 10){ 
         var min = "0" + min; 
        } 
        document.getElementById("currentTime").innerHTML = min + ":" + sec;      var percent = 100 * (music.currentTime/duration) - 2; 
        document.getElementById("slider").style.marginLeft=percent + "%"; 
       } 
      , 1000); 
      } 
     function toggleP(){ 
      var music = document.getElementById("myAudio"); 
      if(music.paused == true){ 
       music.play(); 
      }else if(music.paused == false){ 
       music.pause(); 
      } 
     } 
     function skip(){ 
      var trackList = ["http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3", "http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3"]; 
      if(go == "back"){ 
       track = track - 1; 
      } 
      if(go == "forward"){ 
       track = track + 1; 
      } 
      var aa = clearInterval("timer"); 
      var music = document.getElementById("myAudio"); 
      music.pause(); 
      music.src=trackList[track]; 
      music.load(); 
      var a = setTimeout(function(){music.play(); count();} , 6000); 
     } 
    </script> 
    <audio id="myAudio" src="http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3"> 
    </audio> 
    <br> 
    <div id="custom"> 
      <img onClick="toggleP()" src="img/media-play-pause-resume.png" height="30px"/> 
     <p id="currentTime">00:00</p> 
     <div id="bar"> 
      <div id="slider"></div> 
     </div> 
     <p id="duration">00:00</p> 
     <p id="skip"><strong><a onClick="go = 'back'; skip()"><<</a> <a onClick="go = 'forward'; skip()">>></a><strong></p> 
    </div> 
</body>

вопросы Пользовательские аудио-плеер

Может кто-нибудь сказать мне, почему ползун продолжительность песни прыгает вперед и назад после того, как вы переходите ко второй песне? И почему бар продолжительности не может быть перемещен с помощью margin-top, не перемещая все с ним. Я просто не могу понять. Любая помощь будет принята с благодарностью, спасибо.

источник

2015-06-12 Damian Silva

Просто из любопытства ... вы можете использовать jQuery?Я спрашиваю причину так, как вы можете сделать в нескольких строках очень хороший плеер с перетаскиваемым слайдером и т. Д. –

Нет, дело в том, чтобы сделать это в чистом JavaScript. –

Дамиан, вот твой код: http://jsbin.com/kayesu/1/edit?html,css,js,output. Извините, но все, что я вижу, - это 14 ошибок в JS, 'NaN' ошибках, unescaped' <' and '> 'в HTML и т. Д. Ничто не скачет туда и обратно. Он воспроизводит одну песню, чем просто останавливается на любом другом взаимодействии с вашим кодом. –

jsBin demo

ли не Используйте встроенный JS в вашем HTML! Делает код сложным для отладки. Держите свою логику подальше от своей презентации/шаблона.

Для начала, как работают переменные? После того, как вы установили var, вам не нужно создавать экземпляр одного и того же var снова, используя var внутри вашего кода. Просто используйте/внесите изменения. Поэтому, как только вы установили в верхней части

function el(id){return document.getElementById(id);} // Helps get easily an element 

var el_music = el("myAudio"), // see? 
    el_trackInfo= el("trackInfo"), 
    el_duration = el("duration"), 
    el_currTime = el("currentTime"), 
    el_slider = el("slider"), 
    el_prev  = el("prev"), // assign ID to your prev/next buttons! 
    el_next  = el("next"), 
    el_togg  = el("toggle"), 
    currentTime,  
    trackList = [], 
    track = -1, // Later we'll set it to 0 index triggering auto start 
    totTrack = trackList.length;

... вы должны идти. Не более var утверждений далее в вашем коде.

Возможно, вы захотите показать пользователю дополнительную информацию.
Хороший способ для хранения ваших данных для создания объектов с заданными свойствами:

trackList = [ 
    { 
    artist : "The Doors", 
    fileName : "People Are Strange", 
    file : "http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3" 
    }, 
    { 
    artist : "ACDC", 
    fileName : "Back In Black", 
    file : "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" 
    }, 
    { 
    artist : "Four Seasons", 
    fileName : "Oh What A Night", 
    file : "http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3" 
    } 
]

теперь вы можете не только получить желаемый звуковой тракт, но и показывать пользователю больше информации о треке.

Не повторяйте себя. Расчет времени повсюду делает ваш код не модульным, а грязным. Вместо того, чтобы создать функцию, которая поможет вам return нужный отформатированный время:

function getTime(t) { // `t` is some time value 
    var m = ~~(t/60), 
     s = ~~(t % 60); 
    return (m<10?"0"+m:m) +':'+ (s<10?"0"+s:s); // returns i.e: "01:25" 
}

Создать функцию прогресса как:

function progress() { 
    el_currTime.innerHTML = getTime(el_music.currentTime); // see how our getTime fn is used? 
    el_duration.innerHTML = getTime(el_music.duration); 
    el_slider.style.marginLeft = Math.floor(100/el_music.duration*el_music.currentTime) + "%"; 
}

чем воспроизведение/пауза один:

function playPause(){ 
    var isPaused = el_music.paused; 
    el_music[isPaused ? "play" : "pause"](); 
    el_togg.innerHTML = isPaused ? "&#10074;&#10074;" : "&#9658;" ; 
}

для PREV/NEXT, назначьте идентификаторы вашим кнопкам id="prev" и id="next" и снова создайте функцию, которая будет обрабатывать оба окна кликов:

function skip(){ // This gets triggered by both prev/next buttons. 
    track = this.id==="next" ? ++track : --track; // Next clicked' increment, else decr. 
    track = track < 0 ? totTrack-1 : track%totTrack; // Allows you to loop infinitely the index 
    var trackToPlay = trackList[ track ]; // Get the Track Object "{}" 
    el_trackInfo.innerHTML = trackToPlay.artist+' '+trackToPlay.fileName; 
    el_music.src = trackToPlay.file; 
    el_music.addEventListener('canplaythrough', el_music.play); 
}

Верьте или нет - Вы готовы!
Имея все новомодные функции в месте, что вам нужно сейчас некоторые слушатели событий:

el_prev.addEventListener("click", skip); 
el_next.addEventListener("click", skip); 
el_togg.addEventListener("click", playPause); 
el_music.addEventListener("timeupdate", progress); 
el_music.addEventListener("ended", playPause); 

el_next.click(); // Auto Start playing!

Теперь вы, наверное, интересно, где это ваш интервал 1000 функции ушел? Это просто обрабатывается el_music.addEventListener("timeupdate", progress);.

источник

2015-06-14 10:28:15

Хорошая прогулка, я бы просто сделал 'el_music.addEventListener ('canplaythrough', el_music.play);' из функции 'skip' или хотя бы называть' el_music.removeEventListener ('canplaythrough', el_music.play); ', чтобы избежать добавления бесполезных обработчиков событий. – Kaiido

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

со всеми ошибками и проблемами, которые у вас были, я также хотел бы знать, что –

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

источник

2016-03-19 02:00:47 DaveJone359

вопросы Пользовательские аудио-плеер

ответ

Смежные вопросы