JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<script>
SM2_DEFER = true;
</script>
<script src='https://github.com/scottschiller/SoundManager2/raw/V2.97a.20110424+DEV/script/soundmanager2.js'></script>

<input type="button" onclick="handler1();" value="click 1st" />
<input type="button" onclick="handler2();" value="click 2nd" />
<input type="button" onclick="handler3();" value="click 3rd -- broken on iOS" />

JavaScript

window.addEvent('domready', function() {

    if (SM2_DEFER) {
        soundManager = new SoundManager();
    }
      
    soundManager.url = 'http://quizlet.com/i/sm2-v3/';
    soundManager.debugMode = true;
    soundManager.flashVersion = 9;
    
    if (SM2_DEFER) {
        soundManager.beginDelayedInit();
    }
        
});

var url1 = 'http://v.quizlet.net/en.mp3?b=RmxvcmlkYQ&s=0Ii77tgu',
    url2 = 'http://v.quizlet.net/en.mp3?b=Y29tcG91bmQ&s=Q3ZaOCtO',
    url3 = 'http://v.quizlet.net/en.mp3?b=bnVjbGV1cw&s=yRB4JeAE';

function handler1() {
      
    // play the 1st sound
    playSound('test1', url1);
    
}

function handler2() {
    
    // preload the 2rd sound
    soundManager.createSound({
        id: 'test2',
        url: url2,
        type: 'audio/mp3'
    }).load();
    
    // play the 2nd (possibly already loaded) sound
    playSound('test2', url2);    
    
}

function handler3() {   
    playSound('test3', url3);
}

function playSound(soundId, url) {
    var sound = soundManager.getSoundById(soundId);
    
    if (!sound) {
        
        soundManager.stopAll();
        soundManager.createSound({
            id: soundId,
            url: url,
            type: 'audio/mp3'
        }).play();
    
    } else if (sound.playState == 1) {
        
        console.log('already playing... do nothing');
        
    } else {
        
        soundManager.stopAll();
        soundManager.play(soundId);
        
    }
}