Adrian Gaudebert
28a93baeed
This is a vue.js app that loads a JSON file from the server and uses that to generate a sound board. Audio files are put into audio/. It takes most of it CSS from kaamelott-soundboard.2ec0b4.fr.
62 lines
2.3 KiB
HTML
62 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Ghetto Blastr</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="manifest" href="site.webmanifest">
|
|
<link rel="apple-touch-icon" href="icon.png">
|
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!--[if lte IE 9]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://mozilla.org/firefox/">upgrade your browser</a> to improve your experience and security.</p>
|
|
<![endif]-->
|
|
<div id="soundboard">
|
|
<header>
|
|
<h1>Ghetto Blastr</h1>
|
|
<template>
|
|
<h2>{{ title }}</h2>
|
|
</template>
|
|
</header>
|
|
|
|
<section class="loading" v-if="!ready">
|
|
<img src="img/loader.gif" alt="Loading" />
|
|
</section>
|
|
|
|
<section class="sounds" v-else>
|
|
<ul>
|
|
<template v-for="asset in assets">
|
|
<li>
|
|
<ghetto-sound
|
|
v-bind:asset="asset"
|
|
v-on:ghetto-playsound="stopAllPlayingSounds"
|
|
ref="sound"
|
|
></ghetto-sound>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
// https://github.com/typicode/pegasus
|
|
//0.3.5
|
|
function pegasus(a,b,c){return c=new XMLHttpRequest,c.open("GET",a),a=[],pegasus.timeout&&(c.timeout=pegasus.timeout),c.ontimeout=function(a){b=a},c.onreadystatechange=c.then=function(d,e,f,g){if(d&&d.call&&(a=[,d,e]),b&&a[2]&&a[2](b,c),4==c.readyState&&(f=a[0|c.status/200])){try{g=JSON.parse(c.responseText)}catch(a){g=null}f(g,c)}},c.send(),c}
|
|
</script>
|
|
<script>
|
|
var GHETTO_SOURCE_REQUEST = pegasus('source.json');
|
|
</script>
|
|
|
|
<script src="lib/vue.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|