目前我正在尝试从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文件和样式表完全包含在空白页面上,它也什么都不显示。
答案 0 :(得分:4)
HTML5音频播放器,带有我自定义js的Wayback Machine显示器。
<强>工作强>
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();
});
&#13;
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;
}
&#13;
<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>
&#13;