适配Zeno.fm API的JavaScript改造：提取流标题中的歌手与歌曲

核心问题分析 #

你当前代码未生效的原因是新Zeno.fm API返回的字段结构与旧API不同，原代码中data.currentSong和data.currentArtist字段不存在，且存在客户端脚本中混用Node.js代码的错误。

具体修改点 #

• 调整API字段提取逻辑：新API的当前曲目信息位于data.metadata.current.title，需要先获取完整标题再拆分歌手与歌曲名。
• 修复元素判断语法：原代码中if (elementArtist, elementSong)是无效的逗号表达式，应改为&&逻辑判断确保两个元素都存在。
• 移除服务器端代码：express和cors是Node.js模块，不能在浏览器脚本中使用，需删除相关代码。
• 优化标题拆分逻辑：处理标题中可能包含多个"-"的情况，确保正确分离歌手与歌曲。

修改后的完整代码 #

<script>
    const $var_streamesdg = document.getElementById("streamesdg");
    const $var_icon = document.getElementById("playiconesdg");
    
    function playPause() {
        if (streamesdg.paused) {
            streamesdg.play();
            $var_icon.classList.remove('fa-play');
            $var_icon.classList.add('fa-pause');
        } else {
            streamesdg.pause();
            $var_icon.classList.remove('fa-pause');
            $var_icon.classList.add('fa-play');
        }
    }
    
    function stop() {
        streamesdg.pause();
        streamesdg.currentTime = 0;
    }

    function updateNowPlaying() {
        fetch('https://api.zeno.fm/mounts/metadata/subscribe/0emqj6gcjpzvv')
            .then(response => response.json())
            .then(data => {
                // 从新API字段中获取完整曲目标题
                const fullTitle = data.metadata?.current?.title || '未知曲目';
                // 拆分歌手和歌曲名（处理多个"-"的情况）
                const titleParts = fullTitle.split(' - ');
                let currentArtist = '未知歌手';
                let currentSong = fullTitle;
                
                if (titleParts.length >= 2) {
                    currentArtist = titleParts[0].trim();
                    currentSong = titleParts.slice(1).join(' - ').trim();
                }

                const elementArtist = document.getElementById('npArtist');
                const elementSong = document.getElementById('npSong');
                
                // 正确判断两个元素是否存在
                if (elementArtist && elementSong) {
                    elementArtist.textContent = currentArtist;
                    elementSong.textContent = currentSong;
                } else {
                    console.error('未找到id为"npArtist"或"npSong"的元素');
                }

                // 获取iTunes专辑封面
                fetch(`https://itunes.apple.com/search?term=${encodeURIComponent(currentArtist)}+${encodeURIComponent(currentSong)}&entity=song&limit=1`)
                    .then(response => response.json())
                    .then(itunesData => {
                        const artworkElement = document.getElementById('artwork');
                        if (!artworkElement) return;
                        
                        if (itunesData.resultCount === 0) {
                            console.log('未找到相关曲目信息');
                            artworkElement.src = 'https://radioesdg.agr1beja.pt/wp-content/themes/radio_esdg/songartwork.png';
                        } else {
                            const artworkUrl = itunesData.results[0].artworkUrl100;
                            artworkElement.src = artworkUrl;
                        }
                    })
                    .catch(error => {
                        console.error('获取封面失败:', error);
                    });
            })
            .catch(error => {
                console.error('获取Zeno.fm数据失败:', error);
            });
    }

    // 每5秒更新一次当前播放信息
    setInterval(updateNowPlaying, 5000);
</script>

额外说明 #

• 使用data.metadata?.current?.title的可选链操作符，避免因API返回结构变化导致的报错。
• 对iTunes搜索参数使用encodeURIComponent，防止特殊字符导致的请求错误。
• 增加了对artwork元素存在性的判断，避免无该元素时的报错。

内容的提问来源于stack exchange，提问作者Daniel Martins