martijnluinstra/Soundboard.js

## index.html
<!-- Example of index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Soundboard</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header id="title">
        <h1>Soundboard</h1>
    </header>
    <div id="sounds"></div>
    <script src="/js/Soundboard.js"></script>
</body>
</html>

## Soundboard.js
/**
 * Some javascript to render a soundboard.
 * Demo: https://vakantieracer.com/
 *
 * You may use an modify this code however you like for non-commercial purposes.
 * I will appreciate it if you mention my name when you do so.
 *
 * Copyright (c) 2018 - Martijn Luinstra
 */

/**
 * Renders a single button (.sound), based on `sounds.json` and sources sound
 * from the `/sounds` folder.
 */
function renderButton (data) {
    let soundButton = document.createElement('button');
    let soundName = document.createTextNode(data.name);
    soundButton.appendChild(soundName);
    soundButton.classList.add('sound');
    soundButton.addEventListener('click', () => {
        let audio = new Audio('sounds/' + data.file);
        audio.addEventListener('ended', () => soundButton.blur());
        audio.play();
    });
    return soundButton;
}

/**
 * Render buttons into #sounds
 */
function renderButtons (data) {
    let soundsList = document.getElementById('sounds');
    for ( let sound of data )
        soundsList.appendChild(renderButton(sound));
}

// Fetch contents of `sounds.json`
fetch('/sounds.json')
    .then( response => response.json() )
    .then( renderButtons )
    .catch( err =>  console.log(err) );

## sounds.json
/**
 * Example of `sounds.json`. The sound files are located in `/sounds/<filename>`.
 */
[
    {
        "name": "Sound name",
        "file": "file.mp3"
    },
    {
        "name": "Name with non-break\u00ADing spaces",
        "file": "file_2.mp3"
    }
]
	<!-- Example of index.html -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Soundboard</title>
	<link rel="stylesheet" href="/css/style.css">
	</head>
	<body>
	<header id="title">
	<h1>Soundboard</h1>
	</header>
	<div id="sounds"></div>
	<script src="/js/Soundboard.js"></script>
	</body>
	</html>
	/**
	* Some javascript to render a soundboard.
	* Demo: https://vakantieracer.com/
	*
	* You may use an modify this code however you like for non-commercial purposes.
	* I will appreciate it if you mention my name when you do so.
	*
	* Copyright (c) 2018 - Martijn Luinstra
	*/

	/**
	* Renders a single button (.sound), based on `sounds.json` and sources sound
	* from the `/sounds` folder.
	*/
	function renderButton (data) {
	let soundButton = document.createElement('button');
	let soundName = document.createTextNode(data.name);
	soundButton.appendChild(soundName);
	soundButton.classList.add('sound');
	soundButton.addEventListener('click', () => {
	let audio = new Audio('sounds/' + data.file);
	audio.addEventListener('ended', () => soundButton.blur());
	audio.play();
	});
	return soundButton;
	}

	/**
	* Render buttons into #sounds
	*/
	function renderButtons (data) {
	let soundsList = document.getElementById('sounds');
	for ( let sound of data )
	soundsList.appendChild(renderButton(sound));
	}

	// Fetch contents of `sounds.json`
	fetch('/sounds.json')
	.then( response => response.json() )
	.then( renderButtons )
	.catch( err => console.log(err) );
	/**
	* Example of `sounds.json`. The sound files are located in `/sounds/<filename>`.
	*/
	[
	{
	"name": "Sound name",
	"file": "file.mp3"
	},
	{
	"name": "Name with non-break\u00ADing spaces",
	"file": "file_2.mp3"
	}
	]