1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>音乐播放器</title>
5
</head>
6
<body>
7
    <input type="text" id="keyword" placeholder="搜索歌曲">
8
    <button onclick="search()">搜索</button>
9
    <div id="results"></div>
10
    <audio id="player" controls></audio>
11

12
    <script>
13
        const API = 'https://你的域名/api';
14

15
        async function search() {
16
            const keyword = document.getElementById('keyword').value;
17
            const res = await fetch(`${API}?server=netease&type=search&id=${keyword}`);
18
            const songs = await res.json();
19

20
            const html = songs.map((song, i) => `
21
                <div onclick="play('${song.url}', '${song.lrc}')">
22
                    ${i + 1}. ${song.title} - ${song.author}
23
                </div>
24
            `).join('');
25

26
            document.getElementById('results').innerHTML = html;
27
        }
28

29
        async function play(url, lrc) {
30
            const player = document.getElementById('player');
31
            player.src = url;
32
            player.play();
33

34
            // 获取歌词
35
            const res = await fetch(lrc);
36
            const text = await res.text();
37
            console.log('歌词:', text);
38
        }
39
    </script>
40
</body>
41
</html>

1
<template>
2
  <div>
3
    <input v-model="keyword" @keyup.enter="search" placeholder="搜索歌曲">
4
    <button @click="search">搜索</button>
5

6
    <div v-for="(song, index) in songs" :key="index" @click="play(song)">
7
      {{ index + 1 }}. {{ song.title }} - {{ song.author }}
8
    </div>
9

10
    <audio ref="player" controls></audio>
11
  </div>
12
</template>
13

14
<script>
15
export default {
16
  data() {
17
    return {
18
      API: 'https://你的域名/api',
19
      keyword: '',
20
      songs: []
21
    }
22
  },
23
  methods: {
24
    async search() {
25
      const res = await fetch(`${this.API}?server=netease&type=search&id=${this.keyword}`);
26
      this.songs = await res.json();
27
    },
28
    async play(song) {
29
      this.$refs.player.src = song.url;
30
      this.$refs.player.play();
31
    }
32
  }
33
}
34
</script>