<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #444;
}
</style>
<title>Meine Soundboard-App</title>
</head>
<body>
<h1>Meine Soundboard-App</h1>
<button onclick="playSound('/sounds/introloop.mp3')">Sound 1</button>
<button onclick="playSound('sound2.mp3')">Sound 2</button>
<button onclick="playSound('sound3.mp3')">Sound 3</button>
<button onclick="playSound('sound4.mp3')">Sound 4</button>
<div id="soundboard">
</div>
</body>
<script>
function playSound(soundfile) {
var audio = new Audio(soundfile);
audio.play();
}
</script>
</html>