index.html

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <title>Freesound Graph</title>
    <meta name="description" content="">
    <meta name="theme-color" content="#000000">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="src/webAudioApiForDesigners.js"></script>
    <script src="//unpkg.com/force-graph"></script>
    <!--<script src="../../dist/force-graph.js"></script>-->
</head>

<body>
    <div id="graph"></div>

    <script>
        const NODE_R = 10;

        var elem = document.getElementById('graph');

        // Audio
        var context = initializeNewWebAudioContext();
        var playingSound; // keep track of playing sound to stop it

        function playSound(d) {
            // load and play sound
            context.loadSound(d.url, '0');
            playingSound = context.playSound('0');
        }

        function stopSound() {
            // stop playing sound
            if (playingSound) {
                playingSound.pause();
            }
        }

        function onNodeHover(node) {
            if (node) {
                elem.style.cursor = 'pointer';
                stopSound();
                playSound(node);
            } else {
                elem.style.cursor = null;
                stopSound();
            }
        }

        $.getJSON("json/example_small_graph.json", function(graph) {
        }).then(data => {
            const Graph = ForceGraph()(elem)
                .backgroundColor('#101020')
                .nodeRelSize(NODE_R)
                .nodeLabel(node => `${node.name}: ${node.tags}`)
                .nodeAutoColorBy('group')
                .linkColor(() => 'rgba(255,255,255,0.2)')
                .onNodeHover(node => onNodeHover(node))
                .graphData(data)
        });
    </script>
</body>

</html>