<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐搜索</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin: 20px 0;
            color: #333;
        }

        .search-container {
            text-align: center;
            margin-bottom: 30px;
        }

        .search-container input {
            padding: 10px;
            width: 70%;
            max-width: 400px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .search-container button {
            padding: 10px 20px;
            font-size: 16px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .search-container button:hover {
            background-color: #45a049;
        }

        .music-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .music-item {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 15px;
            width: calc(100% / 3 - 20px);
            max-width: 300px;
            box-sizing: border-box;
            text-align: center;
        }

        .music-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
        }

        .music-info {
            margin: 15px 0;
            font-size: 14px;
            text-align: left;
        }

        .music-info p {
            margin: 5px 0;
        }

        .music-actions {
            margin-top: 10px;
        }

        .music-actions a {
            text-decoration: none;
            color: #007BFF;
            margin-right: 10px;
        }

        .music-actions a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .music-item {
                width: calc(100% / 2 - 20px);
            }
        }

        @media (max-width: 480px) {
            .music-item {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>音乐搜索</h1>
    <div class="search-container">
        <input type="text" id="searchInput" placeholder="请输入歌曲名称">
        <button onclick="searchMusic()">搜索</button>
    </div>
    <div id="results" class="music-list"></div>
</div>

<script>
    async function searchMusic() {
        const searchTerm = document.getElementById('searchInput').value;
        if (!searchTerm) {
            alert('请输入歌曲名称');
            return;
        }

        const resultsDiv = document.getElementById('results');
        resultsDiv.innerHTML = '<p>搜索中...</p>';

        try {
            const musicList = await Promise.all([1, 2, 3, 4, 5].map(async n => {
                const response = await fetch(`https://api.lolimi.cn/API/qqdg/?word=${encodeURIComponent(searchTerm)}&n=${n}`);
                return await response.json();
            }));

            resultsDiv.innerHTML = '';
            musicList.forEach((result, index) => {
                if (result.code === 200) {
                    const { song, singer, album, interval, quality, cover, link, url } = result.data;

                    const formattedInterval = interval || "未知时长";
                    const fileName = `${song}-${singer}-${album}.mp3`;

                    const musicItem = document.createElement('div');
                    musicItem.className = 'music-item';
                    musicItem.innerHTML = `
                        <img src="${cover}" alt="${song}">
                        <div class="music-info">
                            <p><strong>歌名:</strong> ${song}</p>
                            <p><strong>歌手:</strong> ${singer}</p>
                            <p><strong>专辑:</strong> ${album}</p>
                            <p><strong>时长:</strong> ${formattedInterval}</p>
                            <p><strong>音质:</strong> ${quality}</p>
                        </div>
                        <div class="music-actions">
                            <a href="${link}" target="_blank">在QQ音乐打开</a>
                            <a href="${url}"
     download="${encodeURIComponent(song)}-${encodeURIComponent(singer)}-${encodeURIComponent(album)}.mp3"
     target="_blank">下载歌曲</a>
                        </div>
                    `;
                    resultsDiv.appendChild(musicItem);
                }
            });

            if (resultsDiv.children.length === 0) {
                resultsDiv.innerHTML = '<p class="error">未找到相关歌曲</p>';
            }
        } catch (error) {
            resultsDiv.innerHTML = `<p class="error">搜索出错: ${error.message}</p>`;
        }
    }

    async function downloadSong(url, fileName) {
        try {
            const response = await fetch(url);
            const blob = await response.blob();
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = fileName; // 自定义文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } catch (error) {
            alert('下载失败: ' + error.message);
        }
    }
</script>
</body>
</html>
我希望这个下载按钮不打开一个新的tab页面，并且下载文件的文件名为歌名-歌手-专辑.mp3