带倍速播放的播放器_带有HTML5的MP3播放器

带倍速播放的播放器

MP3 Player with HTML5 In you are a beginner in HTML5 and you are looking for new knowledge – our new tutorial is for you. We are about to tell you how to create your own html5 mp3 player. For the first lesson, we are going to tell you about HTML5 Audio Element. The HTML5 audio element is at the core of the new media API. The element itself allows you to play several different types of audio files and has a convenient built-in controller, which allows the user to control the audio playback. Let’s start by creating a very basic HTML document that plays an audio file.

带有HTML5的MP3播放器您是HTML5的初学者，并且正在寻找新知识–我们的新教程非常适合您。 我们将告诉您如何创建自己的html5 mp3播放器。 在第一课中，我们将向您介绍HTML5音频元素。 HTML5音频元素是新媒体API的核心。 元素本身允许您播放几种不同类型的音频文件，并具有一个方便的内置控制器，该控制器使用户可以控制音频播放。 让我们从创建一个播放音频文件的非常基本HTML文档开始。

Before we get started, let’s assemble the tools that you need to create and test the actual file. Here’s what you’ll need:

在开始之前，让我们组装创建和测试实际文件所需的工具。 这是您需要的：

• A text editor
  文字编辑器
• A web browser or two
  一两个网络浏览器
• An MP3 music file (preferably, one you like!)
  一个MP3音乐文件(最好是您喜欢的一个！)

If you’ve never done this type of coding before, let’s take a quick moment to go over each item on the list above.

如果您以前从未进行过这种编码，那么让我们花点时间浏览一下上面列表中的每个项目。

Text Editor: A text editor is like a word processor – with one important difference. A word processor will embed control codes in the text that the word processor will use to render the document. A text editor stores the text as "pure text." We need pure text since the browser, which will display your final work product, requires text to be free from control codes. You may use any text editor you like. For the PC, you may use Notepad++ and EditPad+ (both are recommended). Default Notepad, which comes with the Windows operating system is OK too, but, we don’t recommend to use it (because of extra blank lines which you could get in the result). For Mac or PC, you may use the free version of Komodo edit, which is available on Komodo’s web site: http://www.activestate.com/komodo-edit. For the tutorial, I’ll be using Sublime – a popular and fairly new editor for the PC.

文本编辑器 ：文本编辑器就像一个文字处理程序，但有一个重要的区别。 文字处理器将在文字处理器中嵌入控制代码，文字处理器将使用这些代码呈现文档。 文本编辑器将文本存储为“纯文本”。 我们需要纯文本，因为将显示最终工作产品的浏览器要求文本中不含控制代码。 您可以使用任何喜欢的文本编辑器。 对于PC，可以使用Notepad ++和EditPad +(两者都推荐)。 Windows操作系统随附的默认记事本也可以，但是，我们不建议您使用它(因为可能会导致结果出现多余的空行)。 对于Mac或PC，您可以使用Komodo edit的免费版本，该版本可在Komodo的网站上找到：http：//www.activestate.com/komodo-edit。 对于本教程，我将使用Sublime –一种流行且相当新的PC编辑器。

In the end, it doesn’t really matter which text editor you use, so find one that you are comfortable with and go for it!

最后，使用哪种文本编辑器并不重要，因此请找到一个自己喜欢的文本编辑器并继续使用！

Web Browser (two, or more): I’m sure if you’re reading this, you already have at least one web browser on your machine. I recommend having at least two or three web browsers. At the time of this writing, browsers are implementing HTML5 with varying levels of compliance to the standard. This means you may see slight differences between how something works in IE, Safari, Firefox, Chrome and other browsers.

Web浏览器(两个或更多) ：我确定如果您正在阅读本文，则您的计算机上已经至少有一个Web浏览器。 我建议至少使用两个或三个Web浏览器。 在撰写本文时，浏览器正在实现HTML5，并且符合该标准的级别各不相同。 这意味着您可能会发现在IE，Safari，Firefox，Chrome和其他浏览器中某些内容的工作方式略有不同。

MP3 Music File: Obviously, if you’re going to play some audio, you need some audio to play. Choose a song you like, because as you go through this first part of the tutorial you’re likely to be hearing it over and over again. Personally, I like Journey.

MP3音乐文件：显然，如果要播放一些音频，则需要播放一些音频。 选择一首您喜欢的歌曲，因为在学习本教程的第一部分时，您可能会一遍又一遍地听到它。 就个人而言，我喜欢旅途。

Once you’ve collected the necessary items, it’s time to start writing some code. Here are the steps to creating the first version of your MP3 Player:

收集了必要的项目后，就该开始编写一些代码了。 以下是创建MP3播放器第一个版本的步骤：

1. Open your Text editor.

1.打开您的文本编辑器。

2. Type the code below. I call this the "Basic Document Structure". I start almost all of my HTML examples with this structure. You can think of it as the skeleton of an HTML file. We’ll be using the HTML5 version of this structure. You might see slight variations of this in other courses and texts – but they all serve the same purpose.

2.输入以下代码。 我称其为“基本文档结构”。 我几乎所有HTML示例都是以这种结构开始的。 您可以将其视为HTML文件的框架。 我们将使用此结构HTML5版本。 在其他课程和教科书中，您可能会看到一些细微的变化–但它们都具有相同的目的。

<!DOCTYPE html>
<html>
<head>
	<title>Audio Player</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Audio Player</title>
</head>
<body>
</body>
</html>

3. Save the file somewhere easy to find. When you save the file you must append the extension .html or .htm. This extension tells the browser that the file you have created is an HTML file and is readable by the browser itself. I am saving mine as audioPlayer1.html.

3.将文件保存在易于查找的位置。 保存文件时，必须附加扩展名.html或.htm。 该扩展名告诉浏览器您创建的文件是HTML文件，并且浏览器本身可以读取。 我将我的文件另存为audioPlayer1.html。

4. The basic document structure, by itself, doesn’t really do anything except give us a place to put our content. Now we’re ready to insert our audio tag and test the music player. Go ahead and copy your MP3 file into the same folder as the HTML document you saved in the previous step.

4.基本文档结构本身并没有做任何事情，只是给了我们放置内容的位置。 现在，我们准备插入音频标签并测试音乐播放器。 继续，并将您的MP3文件复制到与上一步中保存HTML文档相同的文件夹中。

5. Now put your cursor between the open and closing body tags. The opening body tag looks like this: <body>. The closing body tag is preceded with a forward slash like this: </body>. This is what it looks like in my text editor:

5.现在将光标置于打开和关闭body标签之间。 开头的body标签如下所示：<body>。 结束body标记之前是这样的正斜杠：</ body>。 这是我的文本编辑器中的样子：

6. Type the following code where you just placed your cursor. Please note that where it says music.mp3 you should type the file name of the MP3 music file you moved in step four.

6.在您刚放置光标的地方键入以下代码。 请注意，在显示music.mp3的位置，您应该输入在第四步中移动的MP3音乐文件的文件名。

<audio controls="controls">
	<source src="music.mp3" type="audio/mpeg">
</audio>

<audio controls="controls">
	<source src="music.mp3" type="audio/mpeg">
</audio>

7. Save your file one more time. Now we’re ready to test our very simple MP3 player. To open the file in your primary browser, you may simply navigate to the file itself and then double-click it. You also may open the file from any browser by using the open command and navigating to the HTML file you just created.

7.再保存一次文件。 现在，我们准备测试非常简单的MP3播放器。 要在主浏览器中打开文件，您可以简单地导航至文件本身，然后双击它。 您也可以通过使用open命令并导航到刚创建HTML文件，从任何浏览器中打开文件。

If your MP3 player appears not to work – don’t worry! There’s a reason.

如果您的MP3播放器似乎无法正常工作–不用担心！ 是有原因的

While HTML5 has given the browsers a way to play audio (and video) files in a non-proprietary way, not every browser plays every audio format. You may be familiar with some common audio players such as MP3 (which we’ve been using in this example), Aiff, and WAV. You are likely not familiar with another format – Ogg Vorbis.

HTML5为浏览器提供了一种以非专有方式播放音频(和视频)文件的方法，但并不是每个浏览器都可以播放每种音频格式。 您可能熟悉一些常见的音频播放器，例如MP3(在此示例中一直在使用)，Aiff和WAV。 您可能不熟悉另一种格式-Ogg Vorbis。

Examine the chart below to determine which audio formats are familiar with which common browser:

检查下面的图表，以确定哪种音频格式熟悉哪种常用浏览器：

Browser	Ogg Vorbis	MP3	WAV
Firefox	X		X
Safari		X	X
Chrome	X	X
Internet Explorer		X	X

浏览器	奥格·沃比斯	MP3	WAV
火狐浏览器	X		X
苹果浏览器		X	X
Chrome	X	X
IE浏览器		X	X

Based on the chart provided above, if you have an MP3 but attempted to play it using Firefox, you would not have had a good result. Usually, I use a combination of MP3 and Ogg Vorbis to cover most of the major browser platforms. You can easily convert your audio file(s) to Ogg using one of the free and convenient online converter programs. One easy-to-use converter is located at: http://audio.online-convert.com/convert-to-ogg

根据上面提供的图表，如果您有MP3，但尝试使用Firefox播放，则效果不会很好。 通常，我结合使用MP3和Ogg Vorbis来涵盖大多数主要的浏览器平台。 您可以使用免费和便捷的在线转换器程序之一轻松地将音频文件转换为Ogg。 一个易于使用的转换器位于：http://audio.online-convert.com/convert-to-ogg

You can also use an audio production program such as Adobe’s Soundbooth, or the free and ubiquitous Audacity to complete the conversion. Once you convert the file, you’ll have two separate audio files – one in MP3 format and one in OGG. (I’m not really a big fan of WAV files due to their size; however, you can use a combination of WAV and Ogg Vorbis and be covered in all of the major browsers as well)

您还可以使用音频制作程序(例如Adobe的Soundbooth)或免费的无处不在的Audacity来完成转换。 转换文件后，您将拥有两个单独的音频文件-一个为MP3格式，另一个为OGG。 (由于文件的大小，我并不是WAV文件的忠实拥护者；但是，您可以结合使用WAV和Ogg Vorbis，并且在所有主流浏览器中都可以使用)

The next step is to add the source for the Ogg Vorbis file to your code. Modify the audio element in your code so it looks like this:

下一步是将Ogg Vorbis文件的源添加到您的代码中。 修改代码中的音频元素，使其如下所示：

<audio controls="controls">
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
</audio>

<audio controls="controls">
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
</audio>

Now, let’s run the code in the browser again. You should be able to just double-click the icon for the HTML file. If you have more than one browser installed on your machine, you might want to load it in each browser and note the differences. If you have both an MP3 file and an Ogg Vorbis file, the music should play successfully in every browser.

现在，让我们再次在浏览器中运行代码。 您应该能够双击HTML文件的图标。 如果您的计算机上安装了多个浏览器，则可能需要在每个浏览器中加载该浏览器并记下差异。 如果同时具有MP3文件和Ogg Vorbis文件，则音乐应在每个浏览器中都能成功播放。

Here’s what the functional player looks like in Chrome, Firefox and Safari (Mac version):

这是功能播放器在Chrome，Firefox和Safari(Mac版)中的外观：

Chrome Audio Player

Chrome音频播放器

Audio Player in Firefox

Firefox中的音频播放器

Audio Player in Safari

Safari中的音频播放器

Most of the code we have written so far is fairly intuitive, and you can garner most of the meaning simply by reading the tags.

到目前为止，我们编写的大多数代码都是相当直观的，您只需阅读标签即可获得大部分含义。

In the audio tag itself, the controls modifier tells the browser to use the Play, Volume and Song position controls shown in the images above. If the value were set to controls="false" or left out altogether, no controls would appear. You might be wondering how the user plays the music if the controls aren’t visible. We’ll get to that in the next chapter. By the way, technically, modifiers placed in tags – in a fashion similar to the way controls are placed in the audio tag – are known as attributes.

在音频标签本身中，controls修饰符告诉浏览器使用上图所示的Play，Volume和Song位置控件。 如果将该值设置为controls =“ false”或完全省略，则不会显示任何控件。 您可能想知道如果控件不可见，用户如何播放音乐。 我们将在下一章中进行介绍。 顺便说一下，从技术上讲，放置在标签中的修饰符(类似于将控件放置在音频标签中的方式)称为属性。

Speaking of attributes, there are several other attributes that can be used with the audio tag in HTML5. These affect other aspects of the audio player. I don’t actually use these attributes very much and they’re not necessary for this project. For your reference, they are listed in the table below:

说到属性，HTML5中的音频标签还可以使用其他几个属性。 这些会影响音频播放器的其他方面。 实际上，我并没有非常多地使用这些属性，并且这些属性对于本项目不是必需的。 供参考，它们在下表中列出：

Attribute	Purpose
src	As an alternative to use the <source> tags inside the <audio> element the src of the audio may be listed as an attribute of the audio tag. The value of the attribute should be the URI of the audio file. Example: <audio src="music.mp3" controls="controls">
preload	This attribute has three possible values: none, metadata and auto. Where supported by the browser, the attribute will influence how the media should be preloaded to provide the best user experience.
Autoplay	If set to autoplay = "autoplay" the media will start playing as soon as the media loads. Note that Apple has disabled this feature in iOS. Users generally find it annoying when media plays when a page loads and tend to prefer to start and stop media elements themselves.
Loop	When set to loop="loop" this attribute will cause the media to play over and over until stopped by the user.

属性	目的
src	作为在<audio>元素内使用<source>标签的替代方法，可以将音频的src列为音频标签的属性。 该属性的值应为音频文件的URI。 例： <audio src =“ music.mp3” controls =“ controls”>
预载	此属性具有三个可能的值：无，元数据和自动。 在浏览器支持的位置，该属性将影响应如何预加载媒体以提供最佳用户体验。
自动播放	如果设置为autoplay =“ autoplay”，则在媒体加载后立即开始播放。 请注意，Apple已在iOS中禁用此功能。 用户通常会在页面加载时播放媒体时感到烦恼，并且倾向于自己启动和停止媒体元素。
循环	设置为loop =“ loop”时，此属性将导致媒体反复播放，直到被用户停止为止。

翻译自: https://www.script-tutorials.com/mp3-player-with-html5/

带倍速播放的播放器