You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123 lines
3.2 KiB
HTML

7 years ago
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#ytplayer {
padding: 20px;
width: 320px;
}
#playerdiv {
width: 360px;
background: white;
}
#playerdiv.detected {
background: red;
}
#playerdiv.undetected {
background: green;
}
</style>
</head>
<body>
<div class="alllinks">
<div class="detected">
<div>COPYRIGHT DETECTED</div>
<div>
<a href="https://www.youtube.com/watch?v=4ExUF1khFOQ">pitch-25</a>
<a href="https://www.youtube.com/watch?v=06fUhmj3uws">pitch+25</a>
<a href="https://www.youtube.com/watch?v=B3Y66QAqoOs">time+25</a>
<a href="https://www.youtube.com/watch?v=0B3rpUz_LMc">time-25</a>
<a href="https://www.youtube.com/watch?v=AJfvyxbIYlk">resample@11025Hz</a>
<a href="https://www.youtube.com/watch?v=u9DS7cFg4G4">noise recording only noise</a>
<a href="https://www.youtube.com/watch?v=L3sUb5_jTW8">2songs</a>
</div>
</div>
<div class="undetected">
<div>Copyright NOT detected</div>
<a href="https://www.youtube.com/watch?v=Lw9GcLTx6qE">reversed</a>
<a href="https://www.youtube.com/watch?v=HdWtRLQNzq4">noise recording crowd music same distance</a>
<a href="https://www.youtube.com/watch?v=NSNipke4ka8">noise recording crowd music far</a>
<a href="https://www.youtube.com/watch?v=0p_5MvfQnWw">chunks mixed 15s</a>
<a href="https://www.youtube.com/watch?v=NgPeKflGqtM">vocals isolated</a>
<a href="https://www.youtube.com/watch?v=PzlmAnD1JmI">vocals removed</a>
</div>
</div>
<div id="playerdiv" class="">
<div id="ytplayer"></div>
</div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player = null;
var playerdiv = document.getElementById("playerdiv");
function onYouTubePlayerAPIReady() {}
function extract_ytid (href) {
return href.match(/v=?(.+)/)[1]
}
function play (youtubeid) {
if (player === null) {
player = new YT.Player('ytplayer', {
height: '80',
width: '320',
autoplay: true,
videoId: youtubeid,
events: {
'onReady': onPlayerReady
}
});
} else {
player.loadVideoById({'videoId': youtubeid, 'events': { 'onReady': onPlayerReady }})
}
}
function onPlayerReady () {
player.playVideo();
}
function $ (sel, callback) {
var ll = document.querySelectorAll(sel);
return Array.prototype.slice.call(ll);
}
$(".detected a").forEach(function (a) {
a.addEventListener("click", function (e) {
play(extract_ytid(this.href));
e.preventDefault();
playerdiv.setAttribute("class", "");
// show the "result" after a delay
window.setTimeout(function () {
playerdiv.setAttribute("class", "detected");
}, 2500);
});
});
$(".undetected a").forEach(function (a) {
a.addEventListener("click", function (e) {
play(extract_ytid(this.href));
e.preventDefault();
playerdiv.setAttribute("class", "");
// show the "result" after a delay
window.setTimeout(function () {
playerdiv.setAttribute("class", "undetected");
}, 2500);
});
});
</script>
</body>
</html>