<!DOCTYPE html>
<html>
<head>
<title>Play</title>
<script>
function play(hash) {
fetch("/play/" + hash);
}
function stop() {
fetch("/stop");
}
</script>
</head>
<body>
<div class="container">
<div class="categories">
<span class="category">Category 1</span>
<!-- More categories -->
<button class="more">More</button>
</div>
<div class="soundclips">
{% for clip in clips %}
<button onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
{% endfor %}
</div>
<div class="player">
<button onclick="stop()">Stop.</button>
</div>
</div>
</body>
</html>