Freies HTML5 Soundboard

Für einen Pen & Paper-Abend war ich auf der Suche nach einem freien und technisch simplem Soundboard. Idealerweise sollte dieses auf HTML5-Techniken basieren. Ein Soundboard welches diese Kriterien erfüllte, wollte sich sich allerdings nicht finden lassen, so das ich selber tätig wurde. Herausgekommen ist ein simples und einfach zu konfigurierendes Soundboard.

Das Soundboard in Aktion

Zur Nutzung des Soundboard müssen die Soundclips in den assets-Ordner kopiert werden und dazu eine passende boards.json-Datei geschrieben werden. Ein Beispiel dieser Datei befindet sich im Repository. Anschließend kann das Soundboard im Browser genutzt werden. Soundclips können einzeln oder in einer Schleife abgespielt werden. Für jeden Clip lässt sich daneben die Lautstärke einzeln regeln. Auch das Abspielen von mehreren Clips parallel ist kein Problem. Zu finden ist das Soundboard auf GitHub. Lizenziert ist es unter der AGPL in der Version 3 und somit freie Software.

Zwischenablage aus einer Webanwendung heraus nutzen

Wer aus einer Webanwendung heraus etwas in die Zwischenablage kopieren möchte, der benötigte bis vor einiger Zeit dazu ein Schnipsel Flash. Mittlerweile lässt sich dies, ohne zusätzliche Plugins, in den meisten Browsern über eine entsprechende Web Api nutzen.

clipboardjs.com

Einfacher wird die Nutzung dieser Web Api mit der JavaScript-Bibliothek clipboard.js. Die Bibliothek welche sich seit September 2015 in der Entwicklung befindet, abstrahiert die Nutzung der entsprechenden Web Api. Damit wird es möglich, mit wenigen Zeilen, die Zwischenablage in einer Webanwendung zu nutzen. Der Quelltext der Bibliothek ist auf GitHub zu finden. Sie ist unter der MIT Lizenz lizenziert und damit freie Software.

Unterschiedliche Views in einer Single Page Application

Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:

<div id="options" class="widget" style="display: none">
</div>

<div id="game" class="widget">
</div>

Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:

switchView() {
	  
    if(this.activeView==this.Views.Game) {
        $("#game").css({"display": "none"});
        $("#options").css({"display": "block"});
        this.activeView = this.Views.Options;
    }
    else if (this.activeView==this.Views.Options) {
        $("#options").css({"display": "none"});
        $("#game").css({"display": "block"});
        this.activeView = this.Views.Game;
    }
}

In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.

Präsentationsframework für den Browser

Wenn man eine Präsentation mit einem Office-Programm seiner Wahl erstellt, so führt das meist dazu das man sich die ersten Stunden Gedanken über das Design der Präsentation macht, anstatt sich um die Inhalte zu kümmern. Das war einer der Gründe, warum ich für Präsentationen nur noch Frameworks nutzte, welche im Browser laufen und ihren Fokus auf den Inhalt legen.

Eine Präsentation welche mittels Reveal realisiert wurde

Eine Präsentation welche mittels Reveal realisiert wurde

Eines dieser Frameworks ist reveal.js. Besonders schätze ich an reveal.js die Möglichkeit den eigentlichen Inhalt der Präsentation in Markdown-Textdateien auszulagern. So kann sich voll und ganz auf den Inhalt konzentrieren. Das Framework unterstützt dabei alles was man für eine Präsentation benötigt wie Tabellen, Fragmente, Auflistungen und ähnliches. Der Quelltext ist auf GitHub zu finden. Lizenziert ist reveal.js unter der MIT-Lizenz und damit freie Software. Eine Demo gibt es auf der entsprechenden Demo-Seite des Autors.

Starcraft im Browser

Das originale Starcraft hat mittlerweile über 15 Jahre auf dem Buckel. Dies hielt den Entwickler Ryuta nicht davon ab eine Umsetzung von StarCraft für den Browser mittels HTML5 und Javascript zu entwickeln. Die Umsetzung ist dabei nicht mit einem fertigen Spiel zu verwechseln, sondern eher eine Tech-Demo, welche allerdings nicht minder beindruckend ist. So können die Einheiten gesteuert werden und andere Einheiten angegriffen werden – auch an die Soundausgabe wurde gedacht.

StarCraft im Browser

StarCraft im Browser

Lizenziert ist die Engine – dessen Quelltext auf GitHub zu finden ist – unter MIT-Lizenz und damit freie Software. Ausprobieren kann man die Engine unter gloomyson.github.io/StarCraft/.