-
Notifications
You must be signed in to change notification settings - Fork 1
/
SoralSampler.html
113 lines (108 loc) · 4.23 KB
/
SoralSampler.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Soral Sampler is back</title>
<link rel="stylesheet" href="ss-proto.css" />
<style type="text/css">
body
{
background: black;
color:white;
font-family: sans-serif;
}
#sampler
{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width:100%;
}
.sample {
border-radius: 10px;
padding: 10px;
border: 1px solid white;
background:white;
color:black;
max-width:22%;
text-align:center;
margin-bottom: 1rem;
}
.sample:hover
{
background: rgb(200,200,200);
border: 1px solid rgb(30,30,30);
}
.sample span {
display:inline-block;
vertical-align:middle;
height:100%;
line-height:100%;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var list = "AhEuhAhEuh AuBoutCEstSatan BandeDEncules CaSentLHuile CeLivreEstUnBestseller CEstGrasCEstGras CEstLaQuenelleDeLaSubversion CEstLEjacFacialeSystematique CEstLeProjetTalmudique CEstPasUneReligion CEstUnEnculeDeAAZ CEstUnMaitreDeLaDialectique CEstUnTrucDePauvre ChoisirMesVetements ComprendreLEmpire DansLeCulDeAAZ DeAAZ Ding DOuCaVientCetteMerde IlAuraitPuFaireCaca IlFautLeSavoir IlsSontTousSousPseudo JAiBaiseTaFemme JAiRecuDesMenacesDeMortDHandicapes JAiUnTailleurAPayer JeNeFonctionneQueCommeCa JeProduisDuConcept JeSuisTresTresBonSurLePlanDuConcept JLAiEntenduFaireProut JMeSensPlusExciteParAdolfHitler LaPudeurHellenoChretienne LaVulgariteSepharade LEcoleOuTAsApprisAMentir LesChambresAAir LesJuifsEtLesFrancsMacons LesMusulmansSontDeDroite Logos MoiJeSuisUnGoyDuNord MoiSTuVeuxEnTantQueBouddhiste PaixASonAme PaPaPaPa Parasite Pbeuuaaheuuh PourEtreAimeeDUnHomme PourTirerLesLarmesDuGoy PoutPoutPout Scud SiJesusChristMeRegarde StrategiePoutinienne TAsComprisCaOuPas TousCesUntermensch TuVeuxPasEtreActricePorno TuVoisCQueJVeuxDire TuVoudraisQueJeTeSuce UneFilleQuiVaReverDeCoucherAvecMoi".split(' ');
var alfabet = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split('');
var sounds = [];
var doPause = false;
jQuery.noConflict();
(function ( $ ) {
$(document).ready(function() {
$(list).each(function(i, v) {
a = $('<audio>').attr('preload','auto').attr('volume', '0.5');
a.append('<source>').attr('src', 'samples/'+v+'.ogg').attr('type', 'audio/ogg');
a.append('<source>').attr('src', 'samples/'+v+'.mp3').attr('type', 'audio/mpeg');
a.append($('<a>').attr('href', 'samples/'+v+'.ogg').text(v + ' (ogg)'));
a.append($('<a>').attr('href', 'samples/'+v+'.mp3').text(v + ' (mp3)'));
sounds[i] = a;
cont = $('<div class="sample">');
cont.append($('<span>').text("[" + alfabet[i] + "] - " + v.replace(/([A-Z])/g, " $1")));
cont.append(a);
$(cont).click(
function(ev)
{
if (doPause) { $('audio').each(function(i,v){ this.pause(); this.currentTime=0;}); }
$(this).children('audio')[0].play();
});
cont.appendTo('#sampler');
});
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
$(document).keydown(function(e) {
console.log(e.which);
console.log(e);
val = e.keyCode;
chr = String.fromCharCode(val);
if (!isNumeric(chr) && !e.shiftKey) { val += 32; }
chr = String.fromCharCode(val);
idx = alfabet.indexOf(chr);
console.log("Char pressed: " + chr + " ("+ idx + ")");
if (idx != -1 && idx < sounds.length)
{
if (doPause) { $('audio').each(function(i,v){ this.pause(); this.currentTime=0;}); }
sounds[idx][0].play();
}
});
});
})(jQuery);
function initializeMobile()
{
console.log("Playing all");
$('audio').each(function(i,v) {
this.play();
});
console.log("Played all");
}
</script>
</head>
<body>
<h1>Soral Sampler</h1>
<a href="#" ontouchstart="initializeMobile()">Je suis sur mobile</a>
<div id="sampler">
</div>
<footer>Toi aussi crée ton Soral Sampler à partir des <a href="https://github.com/ChloeTigre/SoralSampler/">sources</a> voire crée du concept, améliore-le !</footer>
</body>
</html>