diff --git a/neode-ui/src/components/cloud/FileCard.vue b/neode-ui/src/components/cloud/FileCard.vue
index 5f3ce652..29344559 100644
--- a/neode-ui/src/components/cloud/FileCard.vue
+++ b/neode-ui/src/components/cloud/FileCard.vue
@@ -103,6 +103,7 @@ const emit = defineEmits<{
   delete: [path: string]
   share: [path: string, name: string, isDir: boolean]
   preview: [path: string]
+  play: [path: string, name: string]
 }>()
 
 const cloudStore = useCloudStore()
@@ -122,8 +123,10 @@ const downloadHref = computed(() => cloudStore.downloadUrl(props.item.path))
 function handleClick() {
   if (props.item.isDir) {
     emit('navigate', props.item.path)
-  } else if (isImage.value || isVideo.value || isAudio.value) {
-    // MediaLightbox handles all three media kinds.
+  } else if (isAudio.value) {
+    // Music goes to the global bottom-bar player, not the lightbox.
+    emit('play', props.item.path, props.item.name)
+  } else if (isImage.value || isVideo.value) {
     emit('preview', props.item.path)
   } else {
     // Non-media files open by downloading — a click should always act on the file.
diff --git a/neode-ui/src/components/cloud/FileGrid.vue b/neode-ui/src/components/cloud/FileGrid.vue
index 6f98f60a..7e032d33 100644
--- a/neode-ui/src/components/cloud/FileGrid.vue
+++ b/neode-ui/src/components/cloud/FileGrid.vue
@@ -53,6 +53,7 @@
         :item="item"
         @navigate="$emit('navigate', $event)"
         @delete="$emit('delete', $event)"
+        @play="(path, name) => $emit('play', path, name)"
         @share="(path, name, isDir) => $emit('share', path, name, isDir)"
         @preview="$emit('preview', $event)"
       />
diff --git a/neode-ui/src/views/Cloud.vue b/neode-ui/src/views/Cloud.vue
index d9be21a7..c5bbadc8 100644
--- a/neode-ui/src/views/Cloud.vue
+++ b/neode-ui/src/views/Cloud.vue
@@ -93,6 +93,7 @@
               :item="r.item"
               @delete="handleDelete"
               @share="handleShare"
+              @play="handlePlay"
               @preview="(p: string) => handlePreview(p, searchMineItems)"
             />
             <button
@@ -141,6 +142,7 @@
           :item="item"
           @delete="handleDelete"
           @share="handleShare"
+          @play="handlePlay"
           @preview="(p: string) => handlePreview(p, filteredMyFiles)"
         />
       </div>
@@ -359,6 +361,7 @@ import { useCloudStore } from '../stores/cloud'
 import { fileBrowserClient, type FileBrowserItem } from '@/api/filebrowser-client'
 import { rpcClient } from '@/api/rpc-client'
 import { getFileCategory } from '../composables/useFileType'
+import { useAudioPlayer } from '../composables/useAudioPlayer'
 import FileCard from '../components/cloud/FileCard.vue'
 import ShareModal from '../components/cloud/ShareModal.vue'
 import MediaLightbox from '../components/cloud/MediaLightbox.vue'
@@ -366,6 +369,7 @@ import MediaLightbox from '../components/cloud/MediaLightbox.vue'
 const router = useRouter()
 const store = useAppStore()
 const cloudStore = useCloudStore()
+const audioPlayer = useAudioPlayer()
 const sectionCounts = ref<Record<string, number>>({})
 const countsLoading = ref(false)
 
@@ -565,6 +569,12 @@ function handleShare(path: string, name: string, isDir: boolean) {
   shareTarget.value = { path, name, isDir }
 }
 
+/** Music opens in the global bottom-bar player (GlobalAudioPlayer in App.vue). */
+async function handlePlay(path: string, name: string) {
+  const url = await cloudStore.streamUrl(path)
+  audioPlayer.play(url, name)
+}
+
 function handlePreview(path: string, context: FileBrowserItem[]) {
   // MediaLightbox filters to media internally; index within that filtered list.
   const mediaItems = context.filter(item => {