diff --git a/app/page.tsx b/app/page.tsx
index 1683bae..91093e7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
-
Noise - An audio-visual pitch for a game about sound
+
The Myrtle Tree - A game about sound and reliving memories.
By Rory Healy
diff --git a/components/audio/audio.module.css b/components/audio/audio.module.css
new file mode 100644
index 0000000..62b36c9
--- /dev/null
+++ b/components/audio/audio.module.css
@@ -0,0 +1,39 @@
+.all {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.button {
+ border: 1px;
+ border-radius: 10px;
+ border-color: rgb(60, 60, 60);
+ background-color: rgb(50, 50, 50);
+ color: white;
+ padding: 10px;
+ width: 50%;
+}
+
+.button:hover {
+ background-color: rgb(60, 60, 60);
+}
+
+.text {
+ color: white;
+}
+
+.text p {
+ display: inline;
+ padding: 10px 0;
+}
+
+.text a {
+ display: inline;
+ padding: 0 3px;
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+.text a:hover {
+ color: rgb(110, 150, 240);
+}
diff --git a/components/audio/audio.tsx b/components/audio/audio.tsx
new file mode 100644
index 0000000..e6d16dc
--- /dev/null
+++ b/components/audio/audio.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+import styles from './audio.module.css';
+
+type Display = 'text' | 'button';
+
+export default function AudioButton({ file, text, type }: { file: string, text: string, type: Display }) {
+ const audio: HTMLAudioElement = new Audio('/public/audio/1.ogg')
+ if (audio === null) {
+ console.log('uhoh')
+ }
+ const id = `audio-${new Date().getTime()}`
+
+ function makeAudio() {
+ if (type == 'text') {
+ return (
+
+ );
+ } else if (type == 'button') {
+ return (
+
+ );
+ }
+
+ return null;
+ }
+
+ return makeAudio();
+}
\ No newline at end of file
diff --git a/public/audio/1.ogg b/public/audio/1.ogg
new file mode 100644
index 0000000..ba17a5a
Binary files /dev/null and b/public/audio/1.ogg differ