自定义制作音频播放器

In the first two articles of this series I introduced the concept and code of a customized audio player. The prototype constructed to this point is “raw”, without any styling: the HTML5 and JavaScript has been written as fast as possible to prove that the basic concept works. In this article, I’ll focus on improving the look of the player and adding microdata, before introducing further functionality in part 4.

在本系列的前两篇文章中，我介绍了定制音频播放器的概念和代码。 至此构建的原型是“原始的”，没有任何样式： HTML5和JavaScript的编写速度尽可能快，以证明基本概念有效。 在本文的第4部分中，在介绍更多功能之前，我将重点关注改善播放器的外观和添加微数据 。

音频元素 (Audio Elements)

First, let’s look at the DOM we have to this point. The script in part 2 of this series added slider controls and other features via progressive JavaScript to the basic markup to create the following:

首先，让我们看一下到目前为止的DOM 。 本系列第2部分中的脚本通过渐进式JavaScript在基本标记中添加了滑块控件和其他功能，以创建以下内容：

<figure id="audioplayer"><figcaption><div>Track<span>24 Ghosts III</span></div><div id="album">Album<span>Ghosts III</span></div><div id="artist">Artist<span>Nine Inch Nails</span></div><div id="time">Time<span>00:00</span></div></figcaption><div id="fader"><input type="range" min="0" max="1" step="any" value="1" id="volumeSlider"><button type="button">volumehigh</button></div><div id="playback"><button type="button">Play</button><progress min="0" max="100" value="0" id="playhead"></progress>
</div><audio src="/assets/audio/24-ghosts-III.mp3" id="audiotrack" preload="auto"></audio>
</figure>

To this we add microdata, both for the benefit of search engines and to hook more JavaScript in later in this series. The code changes to:

为此，我们添加了微数据，既有利于搜索引擎，又在本系列的后面部分中添加了更多JavaScript。 代码更改为：

<figure id="audioplayer" itemprop="track" itemtype="http://schema.org/MusicRecording"><figcaption><div>Track<span itemprop="name">24 Ghosts III</span></div><div id="album">Album<span itemprop="inAlbum">Ghosts III</span></div><div id="artist">Artist<span itemprop="byArtist">Nine Inch Nails</span></div><div id="time">Time<span>00:00</span></div></figcaption>
<meta itemprop="duration" content="PT2M29S">
<div id="fader"><input type="range" min="0" max="1" step="any" value="1" orient="vertical" id="volumeSlider"><button type="button">volumehigh</button>
</div>
<div id="playback"><button type="button">Play</button><progress min="0" max="100" value="0" id="playhead"></progress>
</div><audio src="/assets/audio/24-ghosts-III.mp3" id="audiotrack" itemprop="audio" preload="auto"></audio>
</figure>

音频样式 (Styling Audio)

The CSS used in the player draws nicely on a number of intermediate to advanced techniques. The initial CSS resets the box-sizing model, sets the overall styling for the audio player, and hides the <audio> element completely:

播放器中使用CSS很好地借鉴了许多中级到高级技术。 初始CSS 重置框大小模型 ，设置音频播放器的整体样式，并完全隐藏<audio>元素 ：

* {box-sizing: border-box;
}
figure#audioplayer {border: 1px solid #000;background: url(dark_wall.png) #333;overflow: hidden;width: 27rem;padding: .4rem;margin: 2rem auto;
}
figure#audioplayer audio {width: 0; height: 0;
}

Next, the various data elements inside the player are styled, with borders set on different sides to create dividers between them. The range input is set to vertical for Webkit and Chrome using CSS:

接下来，对播放器内部的各种数据元素进行样式设置，在不同侧面设置边框以在它们之间创建分隔线。 使用CSS将Webkit和Chrome的range输入设置为垂直：

figure#audioplayer figcaption {width: 21.5rem;font-size: 0;margin: .45rem;background: #000;float: left;border: 1px solid #555;text-align: left;
}
figure#audioplayer figcaption div {background: #000;color: #fff;padding: .8rem;font-family: Avenir, Helvetica, sans-serif;text-transform: uppercase;font-size: .8rem;display: inline-block;
}
figure#audioplayer figcaption div span {display: block;font-size: 1.3rem;text-indent: 1rem;
}
div#album {border-top: 1px solid #555;border-bottom: 1px solid #555;width: 100%;
}
div#time {width: 7.55rem;border-left: 1px solid #555;
}
input#volumeSlider{ -webkit-appearance: slider-vertical;
width: 35px;
}

The buttons use a semantic ligature icon font to turn their text into an image:

这些按钮使用语义连字图标字体将其文本转换为图像：

figure#audioplayer button {width: 3rem;height: 3rem;background: #000;color: #fff;border: none;-webkit-font-feature-settings: "liga", "dlig";font-feature-settings: "liga", "dlig";
}
#playback {clear: both;
}
div#fader {display: inline-block;
}

The <progress> element is also styled. It uses HSL to make color changes later (if needed) easier:

<progress>元素也被设置样式。 它使用HSL使以后的颜色更改(如果需要)更容易：

#playback progress {margin-left: 1rem;width: 20rem;height: 12px;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: #888;border: none;color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar,progress::-moz-progress-bar,progress::progress-bar {background: hsl(44,100%,44%);
}
progress::-webkit-progress-value { background: hsl(44,100%,44%);
}
progress::-moz-progress-bar { background-color: hsl(44,100%,44%);
}

Finally, the player is made responsive, moving elements around and decreasing the padding as the viewport narrows:

最后，使播放器具有响应能力 ，随着视口变窄，元素在周围移动并减少填充：

@media screen and (max-width:500px){div#time { display: block !important;border-top: 1px solid #555;width: 100%;
}figure#audioplayer { width: 100%;padding: .2rem;}figure#audioplayer figcaption div { padding: .4rem;}
}
@media screen and (max-width:450px){figure#audioplayer figcaption { width: 16rem;}#playback progress {width: 220px;}
}
@media screen and (max-width:400px) { figure#audioplayer figcaption { width: 14rem;}
}

In the next article, I’ll use the Web Audio API to add and animate a left and right channel meter display for the player.

在下一篇文章中，我将使用Web Audio API为播放器添加左右声道显示并为其设置动画。

翻译自: https://thenewcode.com/985/Making-An-Audio-Player-With-HTML5-Part-3-Microdata-and-Skinning

自定义制作音频播放器