2 files changed, 37 insertions, 0 deletions
diff --git a/client/components/UI/AudioPlayer.jsx b/client/components/UI/AudioPlayer.jsx
new file mode 100644
index 0000000..de6502c
--- /dev/null
+++ b/client/components/UI/AudioPlayer.jsx
@@ -0,0 +1,35 @@
+import { h, Component } from 'preact'
+
+const audio = document.createElement('audio')
+
+export default function AudioPlayer (props) {
+  if (props.file) {
+    audio.src = mp3path(props.file)
+    audio.play()
+    return (
+      <div>
+        Playing {props.file.name}
+      </div>
+    )
+  }
+  else {
+    return (
+      <div>
+        Not Playing
+      </div>
+    )
+  }
+}
+
+function filepath (file) {
+  return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name)
+}
+function mp3path (file) {
+  if (file.mime !== 'audio/mp3') {
+    return filepath(file) + '.mp3'
+  }
+  return filepath(file)
+}
+function pngpath (file) {
+  return filepath(file) + '.png'
+}
diff --git a/client/components/UI/Header.jsx b/client/components/UI/Header.jsx
index 1727f7a..55dd25f 100644
--- a/client/components/UI/Header.jsx
+++ b/client/components/UI/Header.jsx
@@ -1,5 +1,6 @@
 import { h, Component } from 'preact'
 // import { Link } from 'react-router-dom'
+import AudioPlayerContainer from '../../containers/audioPlayerContainer.js'
 
 export default class Header extends Component {
   constructor(props) {
@@ -11,6 +12,7 @@ export default class Header extends Component {
     return (
       <div class='header'>
         <b>spawn cortex</b>
+        <AudioPlayerContainer />
       </div>
     )
   }