JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Web Audio API - iPad Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <style>
        section { padding:10px; margin:0 0 10px; background:DarkSeaGreen }
        a { cursor:pointer; display:block; background: DarkSeaGreen; padding:10px; margin:0 0 3px }
    </style>
</head>
<body>
    <script>
        var app = {};
        $(document).ready(function() {
            // Do we have Web Audio API?
            try {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                audioContext = new AudioContext();
            } catch (e) {
                alert('Web Audio API is not supported in this browser');
            }
            $('#loadClick').on('click',function(){load('./ipad_test.mp3')});
            $('#playTouchEnd').on('touchend',play);
            $('#playTouchStart').on('touchstart',play);
            $('#playClick').on('click',play);
            $('#unlockTouchEnd').on('touchend',unlock);
            $('#unlockTouchStart').on('touchstart',unlock);
            $('#unlockClick').on('click',unlock);
        });
        function unlock() {
            // play empty buffer to unmute audio
            var buffer = audioContext.createBuffer(1, 1, 22050);
            var source = audioContext.createBufferSource();
            source.audioContext = buffer;
            source.connect(audioContext.destination);
            source.start(0);
            $('#messages').append('<p>Unlocked.</p>');
        }
        function load(file) {
            if(app.loaded) {
                $('#messages').append('<p>Already loaded.</p>');
                return;
            }
            var request = new XMLHttpRequest();
            request.open ('GET', 'https://upload.wikimedia.org/wikipedia/commons/d/df/Hello_Nineties_%28Antti_Luode%29.mp3', true);
           ...