javascript - HTML5 音频播放器 : Taking from Wayback Machine?

Question

目前我正在尝试从 Wayback Machine 中获取一个死网站的音频播放器，它现在有点过时了。 ( Wayback Link Here )

我已将此部分包含在我自己的网站中

<section class="player clearfix">
    <div class="player-init preload" data-file="http://example.com/mp3embed-fsszlphd4yu9.mp3"></div>
</section>

据我所见，我们的网页上应该显示这个

<section class="player clearfix">
<div class="audioplayer audioplayer-stopped"><div class="player-init preload" data-file="http://example.com/mp3embed-85r10u3gp28b.mp3"><audio src="http://example.com/mp3embed-85r10u3gp28b.mp3" style="width: 0px; height: 0px; visibility: hidden;"></audio></div><div class="audioplayer-playpause"><a href="#"><span class="fa fa-play"></span></a></div><div class="audioplayer-time audioplayer-time-current">00:00</div><div class="audioplayer-bar"><div class="audioplayer-bar-loaded"></div><div class="audioplayer-bar-played"></div></div><div class="audioplayer-time audioplayer-time-duration">00:00</div><div class="audioplayer-volume"><div class="audioplayer-volume-button"><a href="#"><span class="fa fa-volume-up"></span></a></div><div class="audioplayer-volume-adjust"><div><div style="height: 100%;"></div></div></div></div></div>
</section>

但是在我的网页上它什么也没有显示，即使我将他们所有的旧 Javascript 文件和样式表完全包含在一个空白页面上也是如此。

Answer 1

带有我自定义 js 的 Wayback Machine 显示的 HTML5 音频播放器。

工作

• 播放/暂停按钮
• 持续时间/当前时间
• 可点击的导引头
• 音量(3 个步骤)

Player = {
  maineleSelector : 'section.player',
  $mainEle : null,
  $audioEle : null,
  isPlaying : false,
  fnInit : function() {
    var self = this;
    self.$mainEle = $(self.maineleSelector);
    self.$audioEle = self.$mainEle.find('audio');
    // Toggle play/pause
    self.$mainEle.find('.audioplayer-playpause').on('click',function(){
      // Playing flag
      self.isPlaying = !self.isPlaying;
      // Play/Pause icon
      self._fnUpdatePlayPause();
      // Play/Pause action
      if (self.isPlaying){ self.$audioEle.get(0).play(); } else { self.$audioEle.get(0).pause(); }
    });
    // Timer seekable
    self.$mainEle.find('.audioplayer-bar').on('click', function(e){
      var percent = e.offsetX / this.offsetWidth;
      self.$audioEle.get(0).currentTime = percent * self.$audioEle.get(0).duration;
      self._fnUpdateTime(percent / 100);
    });
    // Audio play
    self.$audioEle.on('play', function(e) {
      self._fnUpdateDuration(e.target.duration);
    });    
    // Audio end
    self.$audioEle.on('ended', function(e) {
        self.isPlaying = false;
        self._fnUpdateTime(e.target.currentTime, e.target.duration);
        self._fnUpdatePlayPause();
    });
    // Timer update
    self.$audioEle.on('timeupdate', function(e) {
        self._fnUpdateTime(e.target.currentTime, e.target.duration);
    });
    // Volume update
    self.$mainEle.find('.audioplayer-volume-button').on('click', function(e){
      if (self.$audioEle.get(0).volume >= 0.99) {
        self.$audioEle.get(0).volume = 0.33;
      } else {
        self.$audioEle.get(0).volume += 0.33;
      }
      self._fnUpdateVolume(self.$audioEle.get(0).volume * 100);
    });    
  }, 
  // Play/Pause icon
  _fnUpdatePlayPause : function(){    
    this.$mainEle.find('.audioplayer-playpause span')
      .addClass(this.isPlaying ? 'fa-pause' : 'fa-play')
      .removeClass(this.isPlaying ? 'fa-play' : 'fa-pause');  
  },
  // Update Length
  _fnUpdateDuration : function(duration){
    this.$mainEle.find('.audioplayer-time-duration').text(this._fnFormatToMMSS(duration));
  },  
  // Update Time
  _fnUpdateTime : function(time, duration){
    this.$mainEle.find('.audioplayer-time-current').text(this._fnFormatToMMSS(time));
    this.$mainEle.find('.audioplayer-bar-played').width(Math.round((100 * time) / duration) + '%');
  },
  // Update Volume
  _fnUpdateVolume : function(volumePC){
    var volumneIconEle = this.$mainEle.find('.audioplayer-volume-button span');
    if (volumePC <= 33) {
      volumneIconEle.removeClass().addClass("fa fa-volume-off");
    } else if (volumePC <= 66) {
      volumneIconEle.removeClass().addClass("fa fa-volume-down");
    } else {
      volumneIconEle.removeClass().addClass("fa fa-volume-up");
    }
  },
  _fnFormatToMMSS : function (timeMilisec) {
    var sec_num = Math.round(timeMilisec);
    var minutes = Math.floor((sec_num / 60));
    var seconds = sec_num - (minutes * 60);

    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return minutes+':'+seconds;
  }
}

$( document ).ready(function() {
  Player.fnInit();
});

section.player {
    margin-top: 25px;
}

user agent stylesheet
article, aside, footer, header, hgroup, main, nav, section {
    display: block;
}

.audioplayer {
    background: #e2e2e2;
    width: calc(100% - 2px);
    height: 50px;
    border: 1px solid #d9d9d9;
    position: relative;
}

div {
    display: block;
}

.audioplayer-playpause {
    color: #858585;
    width: 17px;
    height: 100%;
    margin-left: 29px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    float: left;
    display: block;
}

.audioplayer-time.audioplayer-time-current {
    margin-left: 20px;
    float: left;
}

.audioplayer-time {
    color: #898989;
    width: 40px;
    height: 100%;
    line-height: 50px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

.audioplayer-time.audioplayer-time-duration {
    margin-right: 6px;
    float: left;
}

.audioplayer-bar {
    background: #cccccc;
    width: calc(100% - 238px);
    height: 6px;
    margin: 21px 15px 0px 15px;
    cursor: pointer;
    position: relative;
    float: left;
}

.audioplayer-bar-played {
    display: block;
    position: relative;
    height: 100%;
    padding: 0;
    background: #0082b2;
    width: 0px;
}

.audioplayer-volume {
    color: #858585;
    width: 20px;
    height: 100%;
    margin-left: 16px;
    line-height: 50px;
    font-size: 20px;
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<section class="player clearfix">
    <div class="audioplayer audioplayer-stopped">
      <div class="player-init preload">
        <audio src="http://techslides.com/demos/samples/sample.mp3" style="width: 0px; height: 0px; visibility: hidden;"></audio>
      </div>
      <div class="audioplayer-playpause">
        <a href="#"><span class="fa fa-play"></span></a>
      </div>
      <div class="audioplayer-time audioplayer-time-current">00:00</div>
      <div class="audioplayer-bar">
        <div class="audioplayer-bar-played"></div>
      </div>
      <div class="audioplayer-time audioplayer-time-duration">00:00</div>
      <div class="audioplayer-volume">
        <div class="audioplayer-volume-button">
          <a href="#"><span class="fa fa-volume-up"></span></a>
        </div>
        <div class="audioplayer-volume-adjust">
          <div>
            <div style="height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
</section>