forked from server/soundboard
added support for local audio playback
using howler.js library added support for ctrl+x to toggle between modes closes #10
This commit is contained in:
parent
281560045d
commit
55e8e04bb2
2801
static/howler.js
Normal file
2801
static/howler.js
Normal file
File diff suppressed because it is too large
Load Diff
135
static/main.css
135
static/main.css
@ -1,136 +1 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: Helvetica, "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #333;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: center;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input, button {
|
||||
background-color: #666;
|
||||
border: 1px solid #999;
|
||||
border-radius: 5px;
|
||||
color: #eee;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #999;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #999;
|
||||
border: 1px solid #666;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
nav a {
|
||||
background-color: #eee;
|
||||
border: 1px solid #000;
|
||||
border-radius: 5px;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div #reset {
|
||||
font-size: 2em;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
div #reset:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sound {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sound a {
|
||||
background-color: #ff4136;
|
||||
border: 1px solid #000;
|
||||
border-radius: 50px;
|
||||
box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.6);
|
||||
color: #eee;
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
margin: 10px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.sound a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sound a:active {
|
||||
background-color: #ff4136;
|
||||
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sound-pressed {
|
||||
background-color: #ff4136 !important;
|
||||
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
var localModeEnabled = false;
|
||||
var howlerSounds = [];
|
||||
|
||||
function ready(fn) {
|
||||
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
|
||||
fn();
|
||||
@ -30,6 +33,7 @@ ready(function() {
|
||||
});
|
||||
|
||||
var searchfield = document.querySelector("#search");
|
||||
searchfield.focus();
|
||||
|
||||
searchfield.addEventListener("keyup", function() {
|
||||
|
||||
@ -54,14 +58,22 @@ ready(function() {
|
||||
reset.addEventListener("click", resetSearch, false);
|
||||
sounds_nav.addEventListener("click", resetSearch, false);
|
||||
|
||||
// keyboard listener for esc button
|
||||
// keyboard listener for global key strokes/inputs
|
||||
document.onkeydown = function(evt) {
|
||||
evt = evt || window.event;
|
||||
if (evt.keyCode == 27) {
|
||||
// esc key
|
||||
resetSearch();
|
||||
} else if ((evt.keyCode == 75 || evt.keyCode == 67) && evt.ctrlKey) {
|
||||
// ctrl+k and ctrl+c key binding
|
||||
if (localModeEnabled) {
|
||||
killAllHowlerAudio();
|
||||
} else {
|
||||
ajaxRequest("/?killvideo=yes");
|
||||
}
|
||||
} else if (evt.keyCode == 88 && evt.ctrlKey){
|
||||
toggleLocalMode();
|
||||
}
|
||||
};
|
||||
|
||||
// keyboard listener for enter key
|
||||
@ -126,3 +138,37 @@ function ajaxRequest(url){
|
||||
}
|
||||
}
|
||||
|
||||
function toggleLocalMode(){
|
||||
toggleButton = document.getElementById("local-mode-button").children[0];
|
||||
if(localModeEnabled){
|
||||
localModeEnabled = false;
|
||||
toggleButton.classList.remove("local");
|
||||
toggleButton.innerHTML = "[S]";
|
||||
toggleButton.title = "play sounds on server";
|
||||
}else{
|
||||
localModeEnabled = true;
|
||||
toggleButton.classList.add("local");
|
||||
toggleButton.innerHTML = "[L]";
|
||||
toggleButton.title = "play sounds locally";
|
||||
}
|
||||
}
|
||||
|
||||
function playSound(filename){
|
||||
if(localModeEnabled){
|
||||
// play local audio using howler.js
|
||||
var sound = new Howl({
|
||||
src: ['/sounds/'+filename]
|
||||
});
|
||||
sound.play();
|
||||
howlerSounds.push(sound);
|
||||
}else{
|
||||
ajaxRequest("/play/"+filename);
|
||||
}
|
||||
}
|
||||
|
||||
function killAllHowlerAudio(){
|
||||
for(i=0; i<howlerSounds.length; i++) {
|
||||
howlerSounds[i].stop();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -36,9 +36,13 @@
|
||||
</nav>
|
||||
<content>
|
||||
<section id="sounds" style="display:none;">
|
||||
<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
|
||||
<div>
|
||||
<a onclick="toggleLocalMode();" id="local-mode-button"><button title="play sounds on server">[S]</button></a>
|
||||
<input type="text" id="search" autofocus/>
|
||||
<div id="reset">✕</div>
|
||||
</div>
|
||||
{% for sound in sounds %}
|
||||
<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ '/play/' + sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
|
||||
<div class="sound"><a tabindex="0" class="unselectable" onclick="playSound('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<section id="streams" style="display:none;">
|
||||
@ -63,6 +67,7 @@
|
||||
</form>
|
||||
</section>
|
||||
</content>
|
||||
<script src="/static/howler.js"></script>
|
||||
<script src="/static/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user