React+Spotify API开发音频预览功能遇TypeError问题求助

问题根源 #

你调用play()的是字符串类型的URL，而不是浏览器提供的Audio对象。字符串本身没有play()方法，这就是报错的核心原因。另外，Spotify返回的preview_url已经是有效的MP3链接，不需要手动添加.mp3后缀（你的示例URL里的.mp3是误加在参数末尾，反而可能导致链接异常）。

修复方案 #

需要创建浏览器原生的Audio对象，通过这个对象来调用播放/暂停方法。下面是优化后的组件代码：

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';

export class PlayButton extends React.Component {
    constructor(props) {
        super(props);
        this.playMusic = this.playMusic.bind(this);
        // 初始化Audio实例，传入Spotify预览URL
        this.audio = new Audio(this.props.audioFile);
    }

    playMusic() {
        // 切换播放/暂停状态
        if (this.audio.paused) {
            // 处理可能的播放失败（比如浏览器自动播放限制）
            this.audio.play().catch(error => {
                console.error('音频播放失败:', error);
            });
        } else {
            this.audio.pause();
            this.audio.currentTime = 0; // 重置音频到开头
        }
    }

    // 组件卸载时清理音频，避免内存泄漏
    componentWillUnmount() {
        this.audio.pause();
        this.audio.src = '';
    }

    render() {
        return (
            <div>
                <button className="playButton" onClick={this.playMusic}>
                    {/* 根据播放状态切换图标 */}
                    <FontAwesomeIcon icon={this.audio.paused ? faPlay : faPause} />
                </button>
            </div>
        )
    }
}

关键优化点 #

• 使用Audio实例管理音频，而非直接操作字符串URL
• 支持播放/暂停切换，提升用户体验
• 组件卸载时清理音频资源，防止内存泄漏
• 捕获播放异常，处理浏览器自动播放策略限制（比如用户未交互时无法自动播放）
• 移除不必要的.mp3后缀，使用Spotify返回的原始preview_url即可

内容的提问来源于stack exchange，提问作者Rikkie Blanco