diff --git a/natster-io/package.json b/natster-io/package.json
index 84902f4..c8fa4a5 100644
--- a/natster-io/package.json
+++ b/natster-io/package.json
@@ -26,7 +26,8 @@
     "nkeys.js": "^1.1.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-audio-player": "^1.0.7"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
diff --git a/natster-io/pnpm-lock.yaml b/natster-io/pnpm-lock.yaml
index a629c01..be1f8b6 100644
--- a/natster-io/pnpm-lock.yaml
+++ b/natster-io/pnpm-lock.yaml
@@ -47,6 +47,9 @@ dependencies:
   vue-router:
     specifier: ^4.2.5
     version: 4.2.5(vue@3.4.18)
+  vue3-audio-player:
+    specifier: ^1.0.7
+    version: 1.0.7(typescript@5.3.3)
 
 devDependencies:
   '@rushstack/eslint-patch':
@@ -121,6 +124,38 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  /@any-touch/compute@2.2.0:
+    resolution: {integrity: sha512-hrw74b/cVT8SmiKFLValmllajw+bBvTa5iUwIXFVVIJM9T3tO15zZC2QbjVz8Uwi6XjH932RDUILGMs2TNvyQg==}
+    dependencies:
+      '@any-touch/shared': 2.2.0
+      '@any-touch/vector': 2.2.0
+      tslib: 2.6.2
+    dev: false
+
+  /@any-touch/core@2.2.0:
+    resolution: {integrity: sha512-xMHAA5aLCatFto+4fQWyE4YAsyN/LsXS4mnYuVpqFYoNz8dl5FsB/TIyb9JrqMKLYMxxcZ9joqR8gDprH1lwBw==}
+    dependencies:
+      '@any-touch/shared': 2.2.0
+      any-event: 2.2.0
+    dev: false
+
+  /@any-touch/pan@2.2.0:
+    resolution: {integrity: sha512-uMkCHbTm5qWji/FvhumP9n1ZCkPU7hy864g+ZhoWZ0OWAmn7s/TKRo4UqPBfqEPUMV6obGZvatrrgBLWT6J57w==}
+    dependencies:
+      '@any-touch/compute': 2.2.0
+      '@any-touch/shared': 2.2.0
+    dev: false
+
+  /@any-touch/shared@2.2.0:
+    resolution: {integrity: sha512-2n1zWaATi/3osr/dkIUq5O7aSffKUsTM4DsIbPMW1VEO77v/rX2HkLoxt2Djzj5eCGh7An55Vw8NeA33kTTSRA==}
+    dev: false
+
+  /@any-touch/vector@2.2.0:
+    resolution: {integrity: sha512-t7pGYegIDCJl+swwsohZHZKmF71ZMt+hjwVEyhaEP6nQhcx6S7zulxnRxNp1t8s+c/JdK02Q89HnzQ4Ukg4+IA==}
+    dependencies:
+      '@any-touch/shared': 2.2.0
+    dev: false
+
   /@auth0/auth0-spa-js@2.1.3:
     resolution: {integrity: sha512-NMTBNuuG4g3rame1aCnNS5qFYIzsTUV5qTFPRfTyYFS1feS6jsCBR+eTq9YkxCp1yuoM2UIcjunPaoPl77U9xQ==}
     dev: false
@@ -1185,6 +1220,12 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
+  /any-event@2.2.0:
+    resolution: {integrity: sha512-PB4sEiVUjL+5mLmwlAGYdI5/1ouckapxS6+RPIvrGXv9XTMav7M3k3rR/f9fwAR+e2608CTR3FOR5HrOEYTtKA==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -2489,7 +2530,6 @@ packages:
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: true
 
   /tweetnacl@1.0.3:
     resolution: {integrity: sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==}
@@ -2661,6 +2701,16 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /vue3-audio-player@1.0.7(typescript@5.3.3):
+    resolution: {integrity: sha512-7uGyCDzJaEIN4VV7Sf/s/nOUcO7SV0mRNFjf7dOAG+clVGF8rcL8Arp0vXGwmx4jzxqwOcLhl3C6TK/r9eoI/A==}
+    dependencies:
+      '@any-touch/core': 2.2.0
+      '@any-touch/pan': 2.2.0
+      vue: 3.4.18(typescript@5.3.3)
+    transitivePeerDependencies:
+      - typescript
+    dev: false
+
   /vue@3.4.18(typescript@5.3.3):
     resolution: {integrity: sha512-0zLRYamFRe0wF4q2L3O24KQzLyLpL64ye1RUToOgOxuWZsb/FhaNRdGmeozdtVYLz6tl94OXLaK7/WQIrVCw1A==}
     peerDependencies:
diff --git a/natster-io/src/components/File.vue b/natster-io/src/components/File.vue
index 77d5289..5df32e8 100644
--- a/natster-io/src/components/File.vue
+++ b/natster-io/src/components/File.vue
@@ -40,33 +40,40 @@
                 </button>
               </div>
               <div class="sm:flex sm:items-start">
-                <div
-                  class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-                >
-                  <InformationCircleIcon class="h-6 w-6 text-blue-400" aria-hidden="true" />
-                </div>
                 <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                  <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">{{
-                    title
-                  }}</DialogTitle>
+                  <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
+                    {{ catalog.name }} | {{ title }}</DialogTitle
+                  >
                   <div class="mt-2">
                     <p v-if="!!body" class="text-sm text-gray-500">
                       {{ body }}
                     </p>
-
-                    <video
-                      v-if="!!mediaUrl"
-                      id="video"
-                      :type="mimeType"
-                      :src="mediaUrl"
-                      width="640"
-                      height="360"
-                      autoplay
-                      controls
-                    ></video>
                   </div>
                 </div>
               </div>
+              <div class="relative">
+                <video
+                  v-if="!!mediaUrl && mimeType.toLowerCase() == 'video/mp4'"
+                  id="video"
+                  :type="mimeType"
+                  :src="mediaUrl"
+                  width="640"
+                  height="360"
+                  autoplay
+                  controls
+                ></video>
+                <AudioPlayer
+                  v-if="!!mediaUrl && mimeType.toLowerCase() == 'audio/mpeg'"
+                  :option="
+                    getAudioOptions(
+                      mediaUrl,
+                      description == '' ? title : description,
+                      catalog.image
+                    )
+                  "
+                  :title="title"
+                />
+              </div>
               <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                 <button
                   type="button"
@@ -89,10 +96,12 @@ import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import AudioPlayer from 'vue3-audio-player'
+import 'vue3-audio-player/dist/style.css'
 
 import { fileStore } from '../stores/file'
 const fStore = fileStore()
-const { body, title, show, mimeType, mediaUrl } = storeToRefs(fStore)
+const { body, title, show, mimeType, mediaUrl, catalog, description } = storeToRefs(fStore)
 
 function close() {
   console.log('reset')
@@ -106,6 +115,14 @@ watch(mimeType, (newVal, oldVal) => {
   }
 })
 
+function getAudioOptions(inSrc, inTitle, inCover) {
+  return {
+    src: inSrc,
+    title: inTitle,
+    coverImage: inCover
+  }
+}
+
 watch(mediaUrl, (newVal, oldVal) => {
   if (!!newVal) {
     setTimeout(() => {
diff --git a/natster-io/src/components/FileComp.vue b/natster-io/src/components/FileComp.vue
index 572fbde..c31c6e4 100644
--- a/natster-io/src/components/FileComp.vue
+++ b/natster-io/src/components/FileComp.vue
@@ -69,12 +69,7 @@
                 <button
                   :disabled="false"
                   @click.prevent="
-                    cStore.downloadFile(
-                      getFileName(file.path),
-                      catalog.name,
-                      file.hash,
-                      file.mime_type
-                    )
+                    cStore.downloadFile(getFileName(file.path), catalog, file.hash, file.mime_type)
                   "
                   :class="[
                     active ? 'bg-violet-500 text-white' : 'text-gray-900',
@@ -92,7 +87,13 @@
               <MenuItem v-slot="{ active }">
                 <button
                   @click.prevent="
-                    cStore.viewFile(getFileName(file.path), catalog.name, file.hash, file.mime_type)
+                    cStore.viewFile(
+                      getFileName(file.path),
+                      file.description,
+                      catalog,
+                      file.hash,
+                      file.mime_type
+                    )
                   "
                   :class="[
                     active ? 'bg-violet-500 text-white' : 'text-gray-900',
diff --git a/natster-io/src/stores/catalog.ts b/natster-io/src/stores/catalog.ts
index debbcf8..f3f0774 100644
--- a/natster-io/src/stores/catalog.ts
+++ b/natster-io/src/stores/catalog.ts
@@ -147,13 +147,13 @@ export const catalogStore = defineStore('catalog', {
 
       var fileArray
       const nStore = natsStore()
-      const sub = nStore.connection.subscribe('natster.media.' + catalog + '.' + hash)
+      const sub = nStore.connection.subscribe('natster.media.' + catalog.name + '.' + hash)
       ;(async () => {
         for await (const m of sub) {
           const chunkIdx = parseInt(m.headers.get('x-natster-chunk-idx'))
           const totalChunks = parseInt(m.headers.get('x-natster-total-chunks'))
           const senderXKey = m.headers.get('x-natster-sender-xkey')
-         
+
           let decrypted = xkey.open(m.data, senderXKey)
           fileArray.push(decrypted)
 
@@ -172,7 +172,7 @@ export const catalogStore = defineStore('catalog', {
         target_xkey: this.xkey_pub
       }
       await nStore.connection
-        .request('natster.catalog.' + catalog + '.download', JSON.stringify(dl_request), {
+        .request('natster.catalog.' + catalog.name + '.download', JSON.stringify(dl_request), {
           timeout: 5000
         })
         .then((m) => {
@@ -183,7 +183,7 @@ export const catalogStore = defineStore('catalog', {
           console.error('nats requestCatalogFiles err: ', err)
         })
     },
-    async viewFile(fileName, catalog, hash, mimeType) {
+    async viewFile(fileName, fileDescription, catalog, hash, mimeType) {
       const fStore = fileStore()
 
       let xkey = createCurve()
@@ -192,7 +192,7 @@ export const catalogStore = defineStore('catalog', {
 
       var fileArray
       const nStore = natsStore()
-      const sub = nStore.connection.subscribe('natster.media.' + catalog + '.' + hash)
+      const sub = nStore.connection.subscribe('natster.media.' + catalog.name + '.' + hash)
       ;(async () => {
         let timeout
         for await (const m of sub) {
@@ -207,7 +207,7 @@ export const catalogStore = defineStore('catalog', {
               timeout = null
             }
 
-            fStore.render(fileName, mimeType, decrypted)
+            fStore.render(fileName, fileDescription, mimeType, decrypted, catalog)
 
             timeout = setTimeout(() => {
               fStore.endStream()
@@ -216,9 +216,20 @@ export const catalogStore = defineStore('catalog', {
               sub.unsubscribe()
             }, 5000)
           } else {
-            fStore.render(fileName, mimeType, new TextDecoder().decode(decrypted))
+            if (mimeType.toLowerCase() === 'audio/mpeg') {
+              fStore.render(fileName, fileDescription, mimeType, decrypted, catalog)
+            } else {
+              fStore.render(
+                fileName,
+                fileDescription,
+                mimeType,
+                new TextDecoder().decode(decrypted),
+                catalog
+              )
+            }
 
             if (chunkIdx === totalChunks - 1) {
+              fStore.endStream()
               sub.unsubscribe()
             }
           }
@@ -232,7 +243,7 @@ export const catalogStore = defineStore('catalog', {
         target_xkey: this.xkey_pub
       }
       await nStore.connection
-        .request('natster.catalog.' + catalog + '.download', JSON.stringify(dl_request), {
+        .request('natster.catalog.' + catalog.name + '.download', JSON.stringify(dl_request), {
           timeout: 5000
         })
         .then((m) => {
diff --git a/natster-io/src/stores/file.ts b/natster-io/src/stores/file.ts
index 3831755..d798fbf 100644
--- a/natster-io/src/stores/file.ts
+++ b/natster-io/src/stores/file.ts
@@ -5,7 +5,9 @@ export const fileStore = defineStore('file', {
     body: null,
     buffer: [],
     loading: true,
+    catalog: null,
     title: '',
+    description: '',
     show: false,
     mimeType: null,
     codec: null,
@@ -17,19 +19,29 @@ export const fileStore = defineStore('file', {
     videoSourceBuffer: null,
 
     appendCount: 0,
-    appendInterval: null
+    appendInterval: null,
+    streamEndInterval: null
   }),
   actions: {
     endStream() {
       if (this.mediaSource) {
-        this.mediaSource.endOfStream()
-        console.log('stream ended')
+        this.streamEndInterval = setInterval(() => {
+          if (this.buffer.length === 0) {
+            clearInterval(this.streamEndInterval)
+            this.streamEndInterval = null
+
+            this.mediaSource.endOfStream()
+            console.log('stream ended')
+          }
+        }, 100)
       }
     },
-    render(title, mimeType, data) {
+    render(title, description, mimeType, data, catalog) {
       this.title = title
       this.show = true
       this.mimeType = mimeType
+      this.catalog = catalog
+      this.description = description
 
       if (mimeType.toLowerCase().indexOf('video/') === 0) {
         if (!this.mediaSource && !this.mediaUrl && !this.videoSourceBuffer) {
@@ -39,30 +51,72 @@ export const fileStore = defineStore('file', {
           this.codec = 'avc1.640028,mp4a.40.2' //'avc1.42C028,mp4a.40.2' // FIXME-- read this from headers and pass it in to render()
           console.log(MediaSource.isTypeSupported(`video/mp4; codecs="${this.codec}"`))
 
-          const _data = data
           this.mediaSource.addEventListener('sourceopen', () => {
             this.videoSourceBuffer = this.mediaSource.addSourceBuffer(
               `video/mp4; codecs="${this.codec}"`
             )
-
-            this.videoSourceBuffer.addEventListener('updatestart', (e) => {
-              // console.log(e)
+            this.videoSourceBuffer.addEventListener('error', (e) => {
+              console.log(e)
             })
 
-            this.videoSourceBuffer.addEventListener('update', (e) => {
-              // console.log(e)
-            })
+            this.videoSourceBuffer.addEventListener('abort', (e) => {})
+            this.videoSourceBuffer.addEventListener('updatestart', (e) => {})
+            this.videoSourceBuffer.addEventListener('update', (e) => {})
+            this.videoSourceBuffer.addEventListener('updateend', (e) => {})
+          })
 
-            this.videoSourceBuffer.addEventListener('updateend', (e) => {
-              // console.log(e)
-            })
+          this.mediaSource.addEventListener('sourceended', (e) => {
+            this.mediaSource = null
+            this.audioSourceBuffer = null
+            this.videoSourceBuffer = null
 
-            this.videoSourceBuffer.addEventListener('error', (e) => {
+            if (this.appendInterval) {
+              clearInterval(this.appendInterval)
+              this.appendInterval = null
+            }
+
+            this.buffer = []
+          })
+
+          this.mediaSource.addEventListener('sourceclose', (e) => {})
+          this.mediaSource.addEventListener('error', (e) => {})
+
+          this.appendInterval = setInterval(() => {
+            if (
+              this.videoSourceBuffer &&
+              !this.videoSourceBuffer.updating &&
+              this.buffer.length > 0
+            ) {
+              this.videoSourceBuffer.appendBuffer(this.buffer.shift())
+              this.appendCount++
+            }
+          }, 10)
+        }
+
+        this.buffer.push(data)
+      } else if (mimeType.toLowerCase() === 'audio/mpeg') {
+        if (!this.mediaSource && !this.mediaUrl && !this.audioSourceBuffer) {
+          this.mediaSource = new MediaSource()
+          this.mediaUrl = URL.createObjectURL(this.mediaSource)
+          console.log(MediaSource.isTypeSupported(`audio/mpeg`))
+
+          this.mediaSource.addEventListener('sourceopen', () => {
+            this.audioSourceBuffer = this.mediaSource.addSourceBuffer(`audio/mpeg`)
+            this.audioSourceBuffer.addEventListener('error', (e) => {
               console.log(e)
             })
 
-            this.videoSourceBuffer.addEventListener('abort', (e) => {
-              // console.log(e)
+            this.audioSourceBuffer.addEventListener('abort', (e) => {
+              console.log(e)
+            })
+            this.audioSourceBuffer.addEventListener('updatestart', (e) => {
+              console.log(e)
+            })
+            this.audioSourceBuffer.addEventListener('update', (e) => {
+              console.log(e)
+            })
+            this.audioSourceBuffer.addEventListener('updateend', (e) => {
+              console.log(e)
             })
           })
 
@@ -79,30 +133,29 @@ export const fileStore = defineStore('file', {
             this.buffer = []
           })
 
-          this.mediaSource.addEventListener('sourceclose', (e) => {
-            // console.log(e)
-          })
-
-          this.mediaSource.addEventListener('error', (e) => {
-            // console.log(e)
-          })
+          const re = /sourcebuffer is full/i // FIXME? how does this work across browsers?
+
+          this.appendInterval = setInterval(() => {
+            if (
+              this.audioSourceBuffer &&
+              !this.audioSourceBuffer.updating &&
+              this.buffer.length > 0
+            ) {
+              const _data = this.buffer.shift()
+
+              try {
+                this.audioSourceBuffer.appendBuffer(_data)
+                this.appendCount++
+              } catch (e) {
+                if (e.toString().match(re)) {
+                  this.buffer.unshift(_data)
+                }
+              }
+            }
+          }, 10)
         }
 
-        this.appendInterval = setInterval(() => {
-          if (
-            this.videoSourceBuffer &&
-            !this.videoSourceBuffer.updating &&
-            this.buffer.length > 0
-          ) {
-            this.videoSourceBuffer.appendBuffer(this.buffer.shift())
-
-            this.appendCount++
-            // console.log(`append count: ${this.appendCount}`)
-          }
-        }, 10)
-
         this.buffer.push(data)
-        // console.log(`buffer length: ${this.buffer.length}`)
       } else {
         this.body = data
       }
@@ -113,6 +166,11 @@ export const fileStore = defineStore('file', {
         this.appendInterval = null
       }
 
+      if (this.streamEndInterval) {
+        clearInterval(this.streamEndInterval)
+        this.streamEndInterval = null
+      }
+
       this.body = null
       this.buffer = []
       this.codec = null