Wayback Machineからオーディオプレーヤーを使用していますか？

Question

現在、私は、Wayback Machineの死んだウェブサイトのオーディオプレーヤーを入手しようとしています。私は自分のウェブサイト

私が見ているものから、私たちのウェブページ

<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> 

しかし、それはです私のWebページ上でこれを表示する必要がある

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

にこの部分を含めました（Wayback Link Here）

古いJavascriptファイルとスタイルシートを空白のページに完全に組み込んだとしても、何も表示しません。

Answer 1

私のカスタムjsとWayback Machineからのディスプレイを備えたHTML5オーディオプレーヤー。

作業

• 再生/一時停止ボタン
• 期間/現在の時刻
• クリッカブルシーカー

は

を作業しないでください
• Volumne

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); 
 
    });  
 
    }, 
 
    // 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) + '%'); 
 
    }, 
 
    _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>