简易 HTML 在线编辑器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>歌曲列表</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 200px; max-width: 800px; margin: 0 auto; }
        h1 { color: #333; text-align: center; }
        .song-card { background: white; padding: 15px; margin: 10px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; }
        .song-pic { width: 60px; height: 60px; border-radius: 4px; margin-right: 15px; object-fit: cover; }
        .song-info { flex-grow: 1; }
        .song-title { font-size: 18px; font-weight: bold; color: #222; margin-bottom: 5px; }
        .song-artist { font-size: 14px; color: #666; }
        .play-btn { background: #ff4d4f; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 14px; }
        .play-btn:hover { background: #ff7875; }
        #loading { text-align: center; color: #999; font-size: 18px; }
    </style>
</head>
<body>

<h1>歌曲列表</h1>
    <div id="loading">正在加载数据...</div>
    <div id="song-list"></div>

// 异步获取并渲染数据
        async function fetchSongs() {
            try {
                const response = await fetch(apiUrl);
                if (!response.ok) throw new Error('网络请求失败');
                
                const data = await response.json();
                
                // 隐藏加载提示
                loadingDiv.style.display = 'none';

// 遍历 JSON 数组并生成 HTML
                data.forEach(song => {
                    const songCard = document.createElement('div');
                    songCard.className = 'song-card';

songCard.innerHTML = `
                        <img class="song-pic" src="${song.pic}" alt="${song.title}">
                        <div class="song-info">
                            <div class="song-title">${song.title}</div>
                            <div class="song-artist">${song.author}</div>
                        </div>
                        <a class="play-btn" href="${song.url}" target="_blank">播放音乐</a>
                    `;

songListContainer.appendChild(songCard);
                });
            } catch (error) {
                loadingDiv.innerText = '数据加载失败: ' + error.message;
                loadingDiv.style.color = 'red';
            }
        }

// 执行函数
        fetchSongs();
    </script>
</body>
</html>