动态加载的自定义 javascript/jQuery/HTML5 音频播放器的问题

Question

问题

我创建了一个运行良好的 javascript/jQuery/HTML5 音频播放器，除了一些例外情况...

1. 有时音频会加载，但不会开始播放，即使脚本中包含了 audio.play()
2. 有时玩家会返回“Infinity: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 响应），但它不查找 Range 标头。要触发加载的元数据事件，范围标头需要完整。

您需要确保在提供音频的任何位置都设置了 content-range 标头，以便流工作。这将导致这两个问题。 如果您可以提供有关服务器配置的一些详细信息，我可以给您一个更好的答案。