diff --git a/Controller/PremiumSongsController.php b/Controller/PremiumSongsController.php
index 77cdc3cf7d7e1b88a5021ecc5270ff43a7869231..f9790af5a49e32b93e6944f520d32a1807eb205d 100644
--- a/Controller/PremiumSongsController.php
+++ b/Controller/PremiumSongsController.php
@@ -48,4 +48,31 @@ class PremiumSongsController
             "singer" => $obj["data"]["singer"],
         ]);
     }
+
+    static function getPlayId(IRequest $req, IResponse $res) {
+        $user_id = $req->auth ? $req->auth->user_id : -1;
+        $singer_id = $req->getParam("/premium/:id/play/:songid", "id");
+        $song_id = $req->getParam("/premium/:id/play/:songid", "songid");
+
+        $soap = new SubscribeSoap();
+
+        if(!$soap->is_access_permitted($singer_id, $user_id)){
+            return $res->json([
+                "status" => "failed",
+                "message" => "Access denied"
+            ]);
+        }
+        
+        $fetcher = new FetchAPI(getenv("REST_API"));
+        $rest_key = getenv("REST_KEY");
+        $headers = [
+            "X-API-KEY: $rest_key"
+        ];
+
+        $output  = $fetcher->post("/songs/$song_id/play", "{}", $headers);
+
+        $obj = json_decode($output, true);
+
+        return $res->json($obj);
+    }
 };
diff --git a/Router/PremiumRouter.php b/Router/PremiumRouter.php
index 8c9e2e1df55e5ba940935e792b22f3f915317465..f6293e990347a29c06658943d24a0e4dc53a6130 100644
--- a/Router/PremiumRouter.php
+++ b/Router/PremiumRouter.php
@@ -16,6 +16,7 @@ class PremiumRouter
         //dapetin list penyanyi permium
         $route->route(HttpMethod::Get, "/premium", [SubsciberController::class, "getPremiumSinger"]);
         $route->route(HttpMethod::Post, "/premium/subscribe", [SubsciberController::class, "subscribeSinger"]);
+        $route->route(HttpMethod::Get, "/premium/:id/play/:songid", [PremiumSongsController::class, "getPlayId"]);
         $route->route(HttpMethod::Get, "/premium/:id", [PremiumSongsController::class, "getPremiumSongs"]);
 
         return $route;
diff --git a/View/Pages/PremiumSongs.php b/View/Pages/PremiumSongs.php
index 62110a9d145a346948f393cab6873ee4c8b3d0e4..c2033fc5e9454ea59d9ab2666abd67e13f657749 100644
--- a/View/Pages/PremiumSongs.php
+++ b/View/Pages/PremiumSongs.php
@@ -35,12 +35,22 @@ $this->layout("Templates/PageTemplate", [
                 <td><?= $number + 1 ?></td>
                 <td><?= $song["title"] ?></td>
                 <td><?= $singer["name"] ?> </td>
-                <td>
-                    <a href="/premium/<?= $singer["id"] ?>/play/<?= $song["song_id"] ?>">Play</a>
+                <td id="song_<?= $song["song_id"] ?>">
+                    <button onclick='playSong(<?= $song["song_id"] ?>)'>Play</button>
                 </td>
             </tr>
         <?php
         }
         ?>
     </tbody>
-</table>
\ No newline at end of file
+</table>
+<script>
+async function playSong(songId) {
+    const {data} = await http.get(`/premium/<?= $singer["id"] ?>/play/${songId}`);
+    const el = document.querySelector(`#song_${songId}`);
+
+    el.innerHTML = `
+        <audio src="<?= getenv("CLIENT_REST_API") ?>/songs/play/${data.data.id}" autoplay controls></audio>
+    `;
+}
+</script>
\ No newline at end of file