diff --git a/packages/app/src/components/MusicTrack/index.jsx b/packages/app/src/components/MusicTrack/index.jsx
index 123297f7..10adc94b 100644
--- a/packages/app/src/components/MusicTrack/index.jsx
+++ b/packages/app/src/components/MusicTrack/index.jsx
@@ -22,6 +22,15 @@ export default (props) => {
     const isCurrent = currentManifest?._id === props.track._id
     const isPlaying = isCurrent && playbackStatus === "playing"
 
+    const handleClickPlayBtn = React.useCallback(() => {
+        if (typeof props.onClickPlayBtn === "function") {
+            props.onClick(props.track)
+        } else {
+            console.warn("Searcher: onClick is not a function, using default action...")
+            app.cores.player.start(props.track)
+        }
+    })
+
     return <div
         id={props.track._id}
         className={classnames(
@@ -48,7 +57,7 @@ export default (props) => {
                     type="primary"
                     shape="circle"
                     icon={isPlaying ? <Icons.MdPause /> : <Icons.MdPlayArrow />}
-                    onClick={props.onClick}
+                    onClick={handleClickPlayBtn}
                 />
             </div>
         </div>