JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<div class="trigger">Hover me!
    <audio id="sound" preload="auto">
        <source src="https://bewildrewild.org/wp-content/uploads/SydneyPursel_Seed-Bomb.mp3" />
    </audio>
</div>
<br/>
<div class="trigger">Hover me!
    <audio id="sound" preload="auto">
        <source src="https://bewildrewild.org/wp-content/uploads/rainforest_ambience-GlorySunz-1938133500.mp3" />
    </audio>
</div>
<br/>
<div class="trigger">Hover me!
    <audio id="sound" preload="auto">
        <source src="http://www.wav-sounds.com/cartoon/porkypig1.wav" />
    </audio>
</div>
<br/>
<div class="trigger">Hover me!
    <audio id="sound" preload="auto">
        <source src="https://www.wav-sounds.com/cartoon/daffyduck1.wav" />
    </audio>
</div>
<br/>
<div class="trigger">Hover me!
    <audio id="sound" preload="auto">
        <source src="http://www.wav-sounds.com/cartoon/porkypig1.wav" />
    </audio>
</div>
<br/>
<div class="trigger">Hover me!
    <audio id="sound" preload="auto">
        <source src="http://www.wav-sounds.com/cartoon/daffyduck1.wav" />
    </audio>
</div>

CSS

.trigger {
    width: 200px;
    height: 60px;
    color: #FFF;
    background-color: green;
}

JavaScript

$('.trigger').hover(
    function() {
        sound = $(this).children()[0];
        sound.play();
    }, function() {
        sound.pause();
       // sound.currentTime = 0;
    }
);