JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<script src="http://bfcc.edu/js/buzz.js"></script>
<h1>BCC HTML5 Sound Demo 2</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> 
<p>This example is a new fork that incorporates images for links to sounds. The next step is to move this code to a page on bfcc.edu and pull this information from a database using a 'colors' category.</p>
<!-- all links inside the following div will be handled by Javascript upon click -->
<div id="buzzsounds">
    <div class="sounditem">
        <div class="itemtitle">Black</div>
        <div class="itemimage">
            <a href="black" title="black"><img src="http://bfcc.edu/images/sounds/black.jpg" alt="Black"></a>
        </div>
        <div class="itemblackfeet">siksináttsi</div>
    </div>
    <div class="sounditem">
        <div class="itemtitle">White</div>
        <div class="itemimage">
            <a href="white" title="white"><img src="http://bfcc.edu/images/sounds/white.jpg" alt="White"></a>
        </div>
        <div class="itemblackfeet">ksikksináttsi</div>
    </div>
    <div class="sounditem">
        <div class="itemtitle">Red</div>
        <div class="itemimage">
            <a href="red" title="red"><img src="http://bfcc.edu/images/sounds/red.jpg" alt="Red"></a>
        </div>
        <div class="itemblackfeet">amáóhksináttsi</div>
    </div>
    <div class="sounditem">
        <div class="itemtitle">Orange</div>
        <div class="itemimage">
            <a href="orange" title="orange"><img src="http://bfcc.edu/images/sounds/orange.jpg" alt="Orange"></a>
        </div>
        <div class="itemblackfeet">otahkoináttsi</div>
    </div>
    <div class="sounditem">
        <div class="itemtitle">Pink</div>
      ...

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;
    width: 620px;
}
#buzzsounds img {
    padding: 4px;
    box-shadow:0 0 6px #555;
}
.sounditem {
    float:left;
    width:124px;
    padding-bottom:10px;
}
.itemimage {
    padding: 4px 0 4px 0;
}

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();
}