原文链接：https://letsbuildui.dev/articles/building-an-audio-player-with-react-hooks 今天我们将使用 HTMLAudioElement 接口构建一个基于 React Hooks 的音频播放器组件。这个播放器可以实现音频列表的播放、暂停、进度条拖动以及跳转到下一首或上一首曲目。另外，我们还会给播放器加一个变幻的背景色，让它看起来炫酷一些。 查看演示 这个音频播放器的设计灵感来自Dribbble show，示例音乐来自Pixable。 开始吧！ HTMLAudioElement 概览 我们处理网页上的音频有多种不同的方式。最常见的就是使用 <audio> 标签，或者用 Web Audio API 来实现更底层的音频控制。本教程将采用的方法是 HTMLAudioElement 接口。 HTMLAudioElement 接口提供 </audio><audio> 元素的属性访问及一系列操控它的方法。—— MDN文档 使用它非常简单： const audioElement = new Audio(audio source); 上面代码中 Audio() 构造函数返回一个 audio 元素，包含了针对这个音频源的方法和数据。 audioElement.play(); audioElement.pause(); audioElement.currentTime; audioElement.ended; audioElement.duration; 我们很快就会用到上述这些方法。不过首先，我们要先定义一下我们所开发的音频播放器组件的属性选项。 定义组件的属性 组件所需的属性仅仅是一个音频的播放列表就够了。我们提供一个数组，数组中每个元素包含了单个音频的标题、歌手、音频地址、封面和颜色。 const tracks = [ { title: string, artist: […]

Read more of this post