自定义制作音频播放器

You may not be old enough to remember the days of WinAmp, which was (in its original incarnation) a basic MP3 playback application with the killer feature of customizable themes. Today, we can create our own media player using HTML5 and JavaScript, customizing the appearance with CSS. Planning and building this player will allow developers to learn about HTML5 multimedia, JavaScript DataViews, and the WebAudio API.

您可能还不够大，无法记住WinAmp的时代，WinAmp最初是一个基本的MP3播放应用程序，具有可定制主题的杀手级功能。 今天，我们可以使用HTML5和JavaScript创建自己的媒体播放器，并使用CSS自定义外观。 规划和构建此播放器将使开发人员可以了解HTML5多媒体 ，JavaScript DataViews和WebAudio API 。

In this entry I’ll discuss the planning and design of the player’s interface; the remaining articles in the series will build the code.

在本条目中，我将讨论播放器界面的规划和设计。 本系列中的其余文章将构建代码。

基本玩家 (The Basic Player)

First, let’s assemble a reasonable feature list:

首先，让我们组装一个合理的功能列表：

• Obviously, the code should play MP3 files: very achievable, now that Firefox supports the codec. To keep things simple, the player will have just one predefined track to start.

  显然，该代码应该可以播放MP3文件 ：由于Firefox支持编解码器 ，这是可以实现的。 为了简单起见，播放器只有一个预定义的曲目可以开始。

• We’ll need basic audio controls: play, pause, volume, and mute.

  我们需要基本的音频控制 ： 播放 ， 暂停 ， 音量和静音 。

• A progress bar should show how much music has played, and how much is left.

  进度条应显示播放了多少音乐，还剩多少。

• A timer should show how much time is left on the track.

  计时器应显示轨道上还剩多少时间。

• Another button should set the music track to loop infinitely. 另一个按钮应将音乐轨道设置为无限循环。

• The track name, artist and album information should be displayed. (In the initial version of the player, this information will already be known.)

  曲目名称，艺术家和专辑信息应显示 。 (在播放器的初始版本中，此信息将是已知的。)

进阶玩家 (The Advanced Player)

It’s important to create a path for future improvements to the audio player. These will include:

为将来的音频播放器改进创建一条路径很重要。 这些将包括：

• Clicks on the progress bar should advance and “rewind” the audio track. 单击进度栏上的应该可以前进和后退音轨。

• The ability to load music tracks, and for those tracks to form playlists. For that to happen, we’ll need a Load button.

  加载音乐曲目，以及将这些曲目形成播放列表的能力。 为此，我们需要一个“ 加载”按钮。

• Any ID3 metatag information in these tracks – name, year, artist, and album – will be read and displayed. 这些曲目中的所有ID3元标记信息(名称，年份，艺术家和专辑)都将被读取和显示。
• A meter should show levels in the left and right audio channels. 仪表应在左右音频通道中显示电平。

功能与测试 (Functionality and Testing)

Because we have a growing list of functions, interaction should be carefully considered, even in the simple player.

因为我们的功能列表越来越多，所以即使在简单的播放器中，也应仔细考虑交互。

• The interface should be simple: the Play button should swap to a pause state when clicked, rather than presenting the user with separate buttons for each action.

  界面应该简单：单击“ 播放”按钮时应切换到暂停状态，而不是为用户显示每个操作单独的按钮。

• Clicking Mute should set the volume slider to 0 and pause playback. Clicking the same button again should resume playback at the previous volume.

  单击静音应将音量滑块设置为0并暂停播放。 再次单击相同的按钮应以先前的音量恢复播放。

• When the track has finished playing, it should rewind to its beginning and shift to paused, unless the Loop button is on.

  曲目播放完毕后，除非打开“ 循环播放”按钮，否则应倒回其开头并切换至暂停状态。

The advanced functions should also be tested, to know that they can be achieved.

还应该测试高级功能，以了解它们可以实现。

资源资源 (Resources)

It’s important to know what resources and content you have to hand before starting a project. In this case, I have the following:

在开始一个项目之前，必须要掌握什么资源和内容，这一点很重要。 在这种情况下，我有以下内容：

• A music track by Nine Inch Nails, licensed under Creative Commons. Nine Inch Nails发行的音乐曲目，已获得知识共享许可。

• The HTML5 <audio> and <progress> elements, with supporting JavaScript.

  HTML5 <audio>和<progress>元素，并支持JavaScript。

• PNG files for the buttons and background of the player, based on initial sketches. 基于初始草图的PNG文件，用于播放器的按钮和背景。

初步设计 (Initial Design)

I always prefer to work with pen and paper to start, just to rough in the design. Shown in the header for this article are some initial sketches, on GridBooks pages (a tool I’ll introduce in the very near future).

我总是更喜欢使用笔和纸开始设计，只是为了粗略设计。 本文的标题中显示了GridBooks页面上的一些初始草图(我将在不久的将来介绍该工具)。

扩展性和可访问性 (Expansion & Accessibility)

It’s important to plan for maintenance, accessibility and expansion of your code. To this end, I’ll be writing clearly defined functions in my JavaScript, with HTML & CSS to match, together with accessibility affordances. Ideally, audio with spoken content or lyrics would be captioned, although that will take a separate series of articles.

计划维护，可访问性和代码扩展很重要 。 为此，我将在JavaScript中编写明确定义的函数，并匹配HTML和CSS，以及可访问性。 理想情况下，将对带有语音内容或歌词的音频进行字幕，尽管这将需要单独的系列文章。

翻译自: https://thenewcode.com/877/Making-An-Audio-Player-With-HTML5-Part-1-Features-and-Design

自定义制作音频播放器