JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<script src="http://bfcc.edu/js/buzz.js"></script>
<h1>BCC HTML5 Sound Demo</h1>
<p>The following links use Javascript to pass the name of the sound to a function that will play the sound using the href property of the anchor itself. This is especially useful as many sounds can be loaded on a page using one (1) script to play all of them, eliminating the need to write seperate Javascript code for each sound embedded on a page.</p> 
<!-- all links inside the following div will be handled by Javascript upon click -->
<div id="buzzsounds">
    <a href="elephant" title="elephant sound">Elephant</a><br>
    <a href="error" title="error sound">Error</a><br>
    <a href="lion" title="lion sound">Lion</a><br>
    <a href="monkey" title="monkey sound">Monkey</a><br>
    <a href="truck" title="truck sound">Truck</a><br>
    <a href="win" title="win sound">Win</a><br>
</div>
This link functions normally <a href="http://bfcc.edu/" title="Blackfeet Community College" target="_blank">bfcc.edu</a>.

CSS

body {
    font-family: arial, sans-serif;
    font-size: 12px;
}
h1 {
    font-size: 16px;
    font-weight: bold;
    padding: 0 0 10px 0;
}
p {
    padding-bottom: 10px;           
}
#buzzsounds {
    padding-bottom: 10px;
    font-size: 14px;
}

JavaScript

$(document).ready(function(){
    $("#buzzsounds a").click(function () {
        var soundName = $(this).attr("href");
        playSound(soundName);
        return false;
    });
});

function playSound(soundName) {
    var sound = new buzz.sound('http://bfcc.edu/sounds/' + soundName, { formats: [ 'ogg', 'mp3' ] });
    sound.play();
}