React版Spotify应用获取preview_url为曲目添加预览样例问题求解

问题根因 #

• spotify.js文件的搜索结果处理逻辑中，未提取Spotify API返回的preview_url字段
• Track.js组件内使用的字段名previewSample和实际映射的字段不匹配，且audio标签未添加播放控制属性，用户无法触发播放
• 未处理部分曲目无预览资源的边界情况，可能引发渲染异常

具体修改方案 #

1. 修改spotify.js的搜索结果映射逻辑

找到search方法内的data.tracks.items.map部分，新增预览链接字段映射：

return data.tracks.items.map(track => ({
    id: track.id,
    name: track.name,
    artist:track.artists[0].name,
    album: track.album.name,
    uri:track.uri,
    // 新增此行，提取预览链接，无资源时默认返回空字符串
    previewSample: track.preview_url || ''
}))

2. 修改Track.js的音频播放组件

给audio标签添加controls播放控制属性，同时增加空值判断处理无资源的情况：

render () {
    return (
        <div className="Track">
            <div className="Track-information">
              <h3> {this.props.track.name} </h3>
              <p> {this.props.track.artist}  | {this.props.track.album}</p>
              {/* 修改音频渲染逻辑 */}
              {this.props.track.previewSample ? (
                <audio controls>
                  <source src={this.props.track.previewSample} type="audio/mpeg" />
                  您的浏览器不支持音频播放
                </audio>
              ) : (
                <p className="no-preview">暂无试听资源</p>
              )}
            </div>
           {this.renderAction()}
        </div>
    )
}

注：部分受版权、地区限制的曲目本身不存在预览链接，属于Spotify API的正常返回情况，无需额外调整代码。

内容的提问来源于stack exchange，提问作者Borhen Kalboussi