实现一个简单的基于APlayer.js/.ts的支持网易云远程音乐的音乐播放器

最近写个人网站的时候有这个需求，然而 metting.js 支持不稳定，于是便想自己实现一个。由于我是拿 TS 进行开发的，故使用 APlayer.ts 。
首先 APlayer.ts 音乐是可以直接从远程获取的，请求网易云歌曲只需要请求 https://music.163.com/song/media/outer/url?id=${id}.mp3 。
比较麻烦的是获取歌曲信息和歌词，需要绕开跨域请求限制，考虑到我的网页在 Netlify 上部署，添加一个 netlify.toml 配置文件：

1. [[redirects]]
2. from = "/music/*"
3. to = "https://music.163.com/:splat"
4. status = 200
5. force = true

复制代码

请求歌曲信息和歌词：

1. async fetchSongDetail(songId: number) {
2.     try {
3.         const response = await fetch(
4.             `/music/api/song/detail/?id=${songId}&ids=%5B${songId}%5D`,
5.         );
6.         if (!response.ok) {
7.             throw new Error(`HTTP error! status: ${response.status}`);
8.         }
9.         const data = await response.json();
10.         return data.songs[0];
11.     } catch (error) {
12.         console.error('Error fetching song detail:', error);
13.         return null;
14.     }
15. }
16. async fetchSongLyric(songId: number) {
17.     try {
18.         const response = await fetch(
19.             `/music/api/song/lyric?id=${songId}&lv=1&kv=1&tv=-1`,
20.         );
21.         if (!response.ok) {
22.             throw new Error(`HTTP error! status: ${response.status}`);
23.         }
24.         const data = await response.json();
25.         return data.lrc.lyric;
26.     } catch (error) {
27.         console.error('Error fetching song lyric:', error);
28.         return null;
29.     }
30. }

复制代码

最后我单独注册了一个组件实现网易云音乐的播放：

1. import './music_player.scss';
3. import APlayer from 'aplayer-ts';
5. export class MusicPlayerElement extends HTMLElement {
6.     constructor() {
7.         super();
8.         const id = parseInt(this.id);
9.         this.fetchSongDetail(id).then((detail) => {
10.             if (detail) {
11.                 this.fetchSongLyric(id).then((lyric) => {
12.                     if (lyric) {
13.                         try {
14.                             APlayer().init({
15.                                 container: this,
16.                                 lrcType: 1,
17.                                 audio: [
18.                                     {
19.                                         name: detail.name,
20.                                         artist: detail.artists
21.                                             .map(
22.                                                 (artist: { name: any }) =>
23.                                                     artist.name,
24.                                             )
25.                                             .join(', '),
26.                                         url: `https://music.163.com/song/media/outer/url?id=${id}.mp3`,
27.                                         cover: detail.album.picUrl,
28.                                         lrc: lyric,
29.                                     },
30.                                 ],
31.                             });
32.                         } catch (err) {
33.                             console.error('Error initializing APlayer:', err);
34.                         }
35.                     }
36.                 });
37.             }
38.         });
39.     }
41.     async fetchSongDetail(songId: number) {
42.         // ...
43.     }
44.     async fetchSongLyric(songId: number) {
45.         // ...
46.     }
47. }
49. customElements.define('music-player', MusicPlayerElement);

复制代码

另外还有一个自建的暗色播放器样式：

1. @use '../styles/share.scss' as share;
3. @import url('aplayer-ts/src/css/base.css');
5. @media (prefers-color-scheme: dark) {
6.     .aplayer {
7.         .aplayer-body {
8.             background: share.$main-color;
9.         }
11.         .aplayer-lrc {
12.             &:before {
13.                 background: linear-gradient(180deg,
14.                         share.$main-color 0,
15.                         hsla(0, 0%, 100%, 0));
16.             }
18.             &:after {
19.                 background: linear-gradient(180deg,
20.                         hsla(0, 0%, 100%, 0) 0,
21.                         share.$main-color );
22.             }
24.             p {
25.                 color: white;
27.                 &.aplayer-lrc-current {
28.                     color: #66ccff;
29.                 }
30.             }
31.         }
33.         .aplayer-info {
34.             .aplayer-music {
35.                 .aplayer-author {
36.                     color: #66ccff;
37.                 }
38.             }
39.         }
40.     }
42.     .aplayer-title {
43.         color: white;
44.     }
46.     @media (max-width: calc(#{share.$screen-limit} - 1px)) {
47.         music-player {
48.             display: none;
49.         }
50.     }
51. }

复制代码

使用方法：
[code][/code]
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！