JavaScript 中的“无法读取 null 的属性 (读取 'play')”错误：原因和解决方案

修复 JavaScript 中“无法读取 null 的属性 (读取 'play')”错误

在 JavaScript 中，当你尝试播放 MP3 音频文件时，你可能会遇到“无法读取 null 的属性 (读取 'play') TypeError: 无法读取 null 的属性 (读取 'play')”错误。本文将深入探究导致此错误的原因并提供逐步解决方法。

错误原因

此错误消息表明你正在尝试访问一个尚未初始化或值为 null 的变量。在你的情况下，该错误发生在尝试调用 play() 方法时，该方法作用于一个为 null 的音频元素。这可能是因为音频文件尚未加载或音频元素未正确创建。

解决方案

要解决此问题，请按照以下步骤操作：

1. 将音频文件存储在变量中

const audio = new Audio('./Pics/Senorita.mp3');

这将创建并存储音频元素的引用。

2. 确保音频元素已加载

在调用 play() 方法之前，请确保音频文件已加载并准备好播放。可以使用 load() 方法进行检查：

audio.load();
audio.play();

3. 避免多次创建音频元素

如果你使用的是 React 或类似的框架，你需要避免在每次组件重新渲染时创建多个音频元素。这会导致多个音频文件同时播放。相反，请在组件中声明音频元素，并在每次单击时直接调用 play() 方法：

import sound from './Pics/Senorita.mp3';

function MyComponent({  }) {
  const audio = new Audio(sound);

  const handlePlayClick = () => {  
    audio.play();
  };
  
  return (
    <div>
      <button onClick={handlePlayClick}>播放</button>
    </div>
  );
}

4. 暂停音频文件

要暂停音频文件，你可以使用 pause() 方法：

audio.pause();

完整示例

以下是一个完整的示例，演示如何使用 JavaScript 播放和暂停音频文件：

import sound from './Pics/Senorita.mp3';

function MyComponent({  }) {
  const audio = new Audio(sound);
  audio.load();

  const handlePlayClick = () => {  
    audio.play();
  };

  const handlePauseClick = () => {  
    audio.pause();
  };

  return (
    <div>
      <button onClick={handlePlayClick}>播放</button>
      <button onClick={handlePauseClick}>暂停</button>
    </div>
  );
}

常见问题解答

1. 如何在 React 中播放音频文件？

遵循第 3 步中所述的避免多次创建音频元素的技术。

2. 为什么音频文件无法播放？

可能是音频文件未加载或音频元素未正确创建。检查音频文件路径并确保正确实例化 Audio 对象。

3. 如何在 JavaScript 中获得音频文件的持续时间？

可以使用 duration 属性来获取音频文件的持续时间：

const duration = audio.duration;

4. 如何在 JavaScript 中控制音频文件的音量？

可以使用 volume 属性来控制音频文件的音量：

audio.volume = 0.5; // 设置音量为 50%

5. 如何在 JavaScript 中创建多个音频播放器？

你可以为每个音频文件创建一个单独的 Audio 对象。确保为每个播放器分配唯一的 ID 或引用，以便可以单独控制它们。

结论

通过遵循本文中的步骤，你应该能够解决“无法读取 null 的属性 (读取 'play')”错误，并在 JavaScript 中成功播放和暂停音频文件。通过彻底理解错误原因和采取适当的解决方案，你可以创建功能性和交互式的音频应用程序。