adngdb/ghettoblastr
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity
4aeede8765
ghettoblastr/index.html

68 lines
2.6 KiB
HTML
Raw Normal View History

Made GhettoBlastr. Created a simple web app to play various sounds. 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.
2017-07-26 14:09:33 +00:00
<!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>
Little tweaks.
2017-07-28 17:21:57 +00:00
<meta name="description" content="A sound board">
Made GhettoBlastr. Created a simple web app to play various sounds. 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.
2017-07-26 14:09:33 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
Little tweaks.
2017-07-28 17:21:57 +00:00
<!-- <link rel="apple-touch-icon" href="icon.png"> -->
Made GhettoBlastr. Created a simple web app to play various sounds. 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.
2017-07-26 14:09:33 +00:00
<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">
Added a full CSS loading spinner.
2017-07-28 17:58:36 +00:00
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
Made GhettoBlastr. Created a simple web app to play various sounds. 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.
2017-07-26 14:09:33 +00:00
</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>
Little tweaks.
2017-07-28 17:21:57 +00:00
var GHETTO_SOURCE_REQUEST = pegasus('ghettoblastr.json');
Made GhettoBlastr. Created a simple web app to play various sounds. 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.
2017-07-26 14:09:33 +00:00
</script>
<script src="lib/vue.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink