feat: display link to artist specified by artist.url

demo/index.tsx

@@ -5,7 +5,10 @@ import { APlayer, type AudioInfo } from "../src";
 const playlist1 = [
   {
     name: "Dancing with my phone",
-    artist: "HYBS",
+    artist: {
+      name: "HYBS",
+      url: "https://music.163.com/#/artist?id=49713779",
+    },
     url: "https://music.163.com/song/media/outer/url?id=1969744125",
     cover:
       "https://p1.music.126.net/tOtUdKjS9rktAFRamcomWQ==/109951167748733958.jpg",

src/components/list.tsx

@@ -1,6 +1,7 @@
 import { clsx } from "clsx";
 import { defaultThemeColor } from "../constants";
-import type { AudioInfo } from "../types";
+import type { ArtistInfo, AudioInfo } from "../types";
+import { useCallback } from "react";
 
 type PlaylistProps = {
   open: boolean;
@@ -20,6 +21,14 @@ export function Playlist({
   themeColor = defaultThemeColor,
 }: PlaylistProps) {
   const olStyle = listMaxHeight ? { maxHeight: listMaxHeight } : undefined;
+
+  const renderArtist = useCallback((artist?: string | ArtistInfo) => {
+    if (!artist) return "Audio artist";
+    if (typeof artist === "string") return artist;
+
+    return artist.name ?? "Audio artist";
+  }, []);
+
   return (
     <div
       className={clsx("aplayer-list", {
@@ -50,7 +59,7 @@ export function Playlist({
               {audioInfo.name ?? "Audio name"}
             </span>
             <span className="aplayer-list-author">
-              {audioInfo.artist ?? "Audio artist"}
+              {renderArtist(audioInfo.artist)}
             </span>
           </li>
         ))}

src/components/player.tsx

@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 
 import { ReactComponent as IconPlay } from "../assets/play.svg";
 import { ReactComponent as IconPause } from "../assets/pause.svg";
-import type { AudioInfo } from "../types";
+import type { ArtistInfo, AudioInfo } from "../types";
 import { Playlist } from "./list";
 import { PlaybackControls } from "./controller";
 import { useAudioControl } from "../hooks/useAudioControl";
@@ -145,6 +145,21 @@ export function APlayer({
     [cancelAutoSkip, prioritize]
   );
 
+  const renderArtist = useCallback((artist?: string | ArtistInfo) => {
+    if (!artist) return "Audio artist";
+    if (typeof artist === "string") return artist;
+
+    if (!artist.url) {
+      return artist.name ?? "Audio artist";
+    }
+
+    return (
+      <a href={artist.url} target="_blank" rel="noreferrer">
+        {artist.name ?? "Audio artist"}
+      </a>
+    );
+  }, []);
+
   return (
     <div
       className={clsx("aplayer", {
@@ -177,7 +192,7 @@ export function APlayer({
             </span>
             <span className="aplayer-author">
               {" "}
-              - {playlist.currentSong?.artist ?? "Audio artist"}
+              - {renderArtist(playlist.currentSong?.artist)}
             </span>
           </div>
           <Lyrics

src/styles/main.css

@@ -299,6 +299,13 @@
   font-size: 12px;
   color: #666;
 }
+.aplayer .aplayer-info .aplayer-music .aplayer-author > a {
+  color: inherit;
+  text-decoration: none;
+}
+.aplayer .aplayer-info .aplayer-music .aplayer-author > a:hover {
+  text-decoration: underline;
+}
 .aplayer .aplayer-info .aplayer-controller {
   position: relative;
   display: flex;

src/types.ts

@@ -1,9 +1,14 @@
 export type AudioInfo = {
   name?: string;
-  artist?: string;
+  artist?: string | ArtistInfo;
   url: string;
   cover?: string;
   lrc?: string;
   theme?: string;
   type?: "auto" | "hls" | "normal";
 };
+
+export type ArtistInfo = {
+  name?: string;
+  url?: string;
+};