Проблемы с динамически загруженным, обычая JavaScript/JQuery/HTML5 аудио плеер

Question

Вопрос

Я создал JavaScript/JQuery/HTML5 аудио-плеер, который работает очень хорошо, за исключением нескольких исключений ...

1. Иногда звуковые нагрузки, но не начинает играть, даже если audio.play() включена в сценарий
2. Иногда игрок возвращает длительность «Бесконечности: 0NaN»
3. Иногда звук не все равно, но плеер играет в любом случае (т.е. - песня 90 сек. длинный, но только загружает, отображает продолжительность и воспроизводит что-то вроде 6 секунд)

Я был бы очень признателен за понимание, которое может быть предложено. Заранее спасибо!

Вы можете проверить действие здесь: http://goo.gl/Aw2OaY

Несколько деталей

Я динамически загрузки каждого mp3 через DIV, который хранит местоположение mp3 в атрибуте «данные». При нажатии на скрипт загружается один аудиоплеер html5, расположенный в нижней части моей страницы, с новым mp3.

Вот представление загрузчика:

<div class="song-link" data="/song-url.mp3"><p class="song-title"> My Song</p></div> 

Игрок

<!-- audioPlayer.js --> 
<audio id="music"> 
    <source id="mp3Source" src="" type="audio/mpeg" /> 
</audio> 

<div id="audioPlayerWrap"> 
    <div id="currentSong"></div> 
    <div id="audioplayer"> 
    <button id="pButton" class="play"></button> 
    <div id="timeline"> 
     <div id="playhead"></div> 
    </div> 
    <div id="time"></div> 
    <div id="exitPlayer">X</div> 
    </div> 
</div> 

Сценарий

jQuery(document).ready(function() { 

    // 
    // Store elements 
    // 

    var audioPlayerWrap = document.getElementById('audioPlayerWrap'); 
    var audio = jQuery('audio'); 
    var music = document.getElementById('music'); 
    var mp3Source = jQuery('#mp3Source'); 
    var pButton = document.getElementById('pButton'); 
    var timeline = jQuery('#timeline'); 
    var playhead = document.getElementById('playhead'); 
    var songLink = jQuery('.song-link'); 
    var currentSong = jQuery('#currentSong'); 
    var exitPlayer = jQuery('#exitPlayer'); 

    // 
    // Event Listeners 
    // 

    // Play audio on songLink click 
    songLink.click(function() { 

    // Get song URL from data attribute 
    var songURL = jQuery(this).attr('data'); 
    // Set song URL as audio player source 
    mp3Source.attr('src', songURL); 

    // Get song name 
    var songName = jQuery(this).text(); 
    // Set current song text 
    currentSong.text('Now playing: ' + '"' + songName + '"'); 

    // Load music 
    music.load(); 

    //Load meta data and play 
    music.addEventListener("loadedmetadata", function(event) { 
     var duration = music.duration; 
     // Play music 
     playAudio(); 
    }); 

    // Bind song time to timeline 
    jQuery('#music').bind('timeupdate', updateTime); 

    // Bind song end to time 
    jQuery('#music').bind('ended', songEnded); 

    // Show audio player 
    audioPlayerWrap.style.opacity = 1; 

    }); 

    // Add play/pause function pButton click 
    pButton.addEventListener('click', function() { 
    playAudio(); 
    }); 

    // Make Timeline clickable 
    timeline.click(function(e) { 
    // Store click position X and timeline width in px 
    var offsetLeft = jQuery(this).parent().offset().left; 
    var positionX = (e.pageX - offsetLeft) - 40; // 40 makes up for width of playhead 
    var timelineWidth = timeline.width(); 

    // Update audio position 
    var songDuration = Math.floor(music.duration); 
    var clickPercentage = positionX/timelineWidth; 
    var clickInSeconds = clickPercentage * songDuration; 

    music.currentTime = clickInSeconds; 
    }); 

    // Close audio player on click 
    exitPlayer.click(function() { 
    audioPlayerWrap.style.opacity = 0; 
    // Remove audio player once it's invisible 
    setTimeout(function() { 
     audioPlayerWrap.style.display = 'none'; 
    }, 500); 

    music.pause(); 
    // remove pause, add play 
    pButton.className = ""; 
    pButton.className = "play"; 
    }); 

    // 
    // Functions 
    // 

    //Play/Pause function 
    function playAudio() { 
    // start music 
    if (music.paused) { 
     music.play(); 
     // remove play, add pause 
     pButton.className = ""; 
     pButton.className = "pause"; 
     audioPlayerWrap.style.display = 'block'; // Make sure player can be seen 
    } else { // pause music 
     music.pause(); 
     // remove pause, add play 
     pButton.className = ""; 
     pButton.className = "play"; 
    } 
    } 

    // time function 
    var updateTime = function() { 
    // Timeline width 
    timeline.css({'width': '100%'}); 
    var playheadPosition = Math.floor((this.currentTime/this.duration) * 100); 
    playhead.style.marginLeft = playheadPosition + '%'; 
    // Update timer 
    time.innerHTML = readableDuration(Math.floor(this.currentTime)) + '/' + readableDuration(Math.floor(this.duration)); 
    } 

    // Convert time to readable format 
    function readableDuration(seconds) { 
    sec = Math.floor(seconds);  
    min = Math.floor(sec/60); 
    min = min >= 10 ? min : '0' + min;  
    sec = Math.floor(sec % 60); 
    sec = sec >= 10 ? sec : '0' + sec;  
    return min + ':' + sec; 
    } 

    // song end function 
    var songEnded = function() { 
    if (music.currentTime >= music.duration) { 
     music.pause(); 
     // remove pause, add play 
     pButton.className = ""; 
     pButton.className = "play"; 
     music.currentTime = 0; 
    } 
    } 

}); 

Answer 1

Ваш (Яичница-яйца) аудио файл возвращается 206 и показывающий

«Диапазон: байты = 0-»

Звук в порядке при загрузке независимо (ответ 200), но он не ищет заголовок диапазона. Для запуска загруженного события метаданных заголовок диапазона должен быть завершен.

Необходимо обеспечить, чтобы заголовок диапазона содержимого устанавливался везде, где аудио подается, чтобы поток работал. Это вызовет проблемы. Если вы можете предоставить некоторые сведения о конфигурации своего сервера, я могу дать вам лучший ответ.