全面解析 Howler.js v2.0.12、ES7 及其 Soundcloud-API 构建音频播放器-JavaScript中文网-JavaScript教程资源分享门户

音频播放器是前端开发中常见的需求之一，如何快速搭建一个好用的音频播放器，成为了许多前端开发者必须要解决的问题。在本文中，我们将介绍如何使用 Howler.js v2.0.12、ES7 及其 Soundcloud-API 构建一个功能丰富的音频播放器。

Howler.js v2.0.12 简介

Howler.js 是一个轻量级的 JavaScript 库，用于控制 Web 音频。除了基本的播放/暂停/跳转等功能，它还支持音量控制、音量淡入淡出、立体声和回放速度等高级功能。

ES7 简介

ES7 是 ECMAScript 的第七个版本，主要增加了一些语言特性，如 async/await 等。在本文中，我们将使用 ES7 的 async/await 特性来实现异步操作。

Soundcloud-API 简介

Soundcloud-API 是 Soundcloud 提供的一组 API，用于获取和管理 Soundcloud 的音频资源。

构建一个音频播放器

1. 播放器的功能设计

在构建一个音频播放器之前，我们需要先确定该播放器具备哪些功能。一个高级的音频播放器应该至少具备以下功能：

播放/暂停
根据音频长度和当前进度展示进度条
可拖动进度条进行指定位置播放
显示当前播放时间和总时间
音量调节
声音淡入淡出

2. 音频资源获取

在构建音频播放器之前，我们需要先获取音频资源。我们将使用 Soundcloud 的 API 来获取音频资源。

访问 Soundcloud 的 API 需要提供 access token。为了避免每次访问 API 都需要提供 access token，我们将使用一个代理来访问 API。

我们可以使用以下代码来获取音频资源：

const access_token = 'YOUR_ACCESS_TOKEN';
const proxy_url = 'https://cors-anywhere.herokuapp.com/';
const track_id = 'TRACK_ID';

const response = await fetch(`${proxy_url}https://api.soundcloud.com/tracks/${track_id}/stream?client_id=${access_token}`);
const audio = response.url;

其中，YOUR_ACCESS_TOKEN 和 TRACK_ID 需要替换成你自己的 access token 和音频 ID。

3. 播放器组件构建

为了方便起见，我们将使用 React 来构建我们的播放器组件。在组件中，我们将使用 Howler.js 来控制音频播放，使用 ES7 中的 async/await 特性来实现异步功能。

以下是我们的音频播放器组件代码：

// javascriptcn.com 代码示例
import React from 'react';
import { Howl, Howler } from 'howler';

class AudioPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
      currentTime: 0,
      duration: 0,
      volume: 1,
      isMuted: false,
    };
    this.audio = null;
    this.seekBar = null;
    this.muteButton = null;

    this.handlePlayPause = this.handlePlayPause.bind(this);
    this.handleSeekBarChange = this.handleSeekBarChange.bind(this);
    this.handleVolumeChange = this.handleVolumeChange.bind(this);
    this.handleMute = this.handleMute.bind(this);
    this.updateTime = this.updateTime.bind(this);
  }

  async componentDidMount() {
    const access_token = 'YOUR_ACCESS_TOKEN';
    const proxy_url = 'https://cors-anywhere.herokuapp.com/';
    const track_id = 'TRACK_ID';

    const response = await fetch(`${proxy_url}https://api.soundcloud.com/tracks/${track_id}/stream?client_id=${access_token}`);
    const audio = response.url;

    this.audio = new Howl({
      src: audio,
      html5: true,
      preload: true,
      onplay: () => this.setState({ isPlaying: true }),
      onpause: () => this.setState({ isPlaying: false }),
      onend: () => this.setState({ isPlaying: false, currentTime: 0 }),
      onload: () => {
        this.setState({ duration: this.audio.duration() });
        this.updateTime();
      },
      onseek: () => {
        if (this.seekBar) {
          this.seekBar.value = this.audio.seek();
        }
      },
      volume: this.state.volume,
    });
  }

  handlePlayPause() {
    if (!this.audio) {
      return;
    }

    if (this.audio.playing()) {
      this.audio.pause();
    } else {
      this.audio.play();
    }
  }

  handleSeekBarChange(e) {
    if (!this.audio) {
      return;
    }

    const seekTime = e.target.value;
    this.audio.seek(seekTime);
  }

  handleVolumeChange(e) {
    if (!this.audio) {
      return;
    }

    const volume = e.target.value;
    this.audio.volume(volume);
    this.setState({ volume });
  }

  handleMute() {
    if (!this.audio) {
      return;
    }

    const isMuted = !this.state.isMuted;
    this.audio.mute(isMuted);
    this.setState({ isMuted });
  }

  updateTime() {
    if (!this.audio) {
      return;
    }

    const currentTime = this.audio.seek();
    this.setState({ currentTime });

    setTimeout(this.updateTime, 1000);
  }

  render() {
    const { isPlaying, currentTime, duration, volume, isMuted } = this.state;

    return (
      <div>
        <button onClick={this.handlePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button>
        <input
          type="range"
          min="0"
          max={duration}
          value={currentTime}
          onChange={this.handleSeekBarChange}
          ref={(node) => { this.seekBar = node; }}
        />
        <span>{`${this.formatTime(currentTime)} / ${this.formatTime(duration)}`}</span>
        <button onClick={this.handleMute}>{isMuted ? 'Unmute' : 'Mute'}</button>
        <input
          type="range"
          min="0"
          max="1"
          step="0.05"
          value={volume}
          onChange={this.handleVolumeChange}
        />
      </div>
    );
  }

  formatTime(time) {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  }
}

export default AudioPlayer;

在组件代码中，我们首先获取了音频资源，然后实例化了 Howler.js，根据 Howler.js 的回调函数来更新状态和进度条。handlePlayPause、handleSeekBarChange、handleVolumeChange 和 handleMute 分别用于处理播放/暂停、拖动进度条、调节音量和静音等操作。updateTime 用于每秒更新一次播放进度。

最后在 render 中展示了播放/暂停按钮、进度条、播放时间、音量调节和静音按钮。

总结

在本文中，我们介绍了如何使用 Howler.js v2.0.12、ES7 及其 Soundcloud-API 构建一个功能丰富的音频播放器。除了基本的播放、暂停和跳转，我们还展示了进度条、音量调节、声音淡入淡出等高级功能，同时使用了 ES7 中的 async/await 特性来实现异步操作。希望本文能对大家学习前端开发有帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f7f6c8f6b2d6eab3028070