在这篇文章中，您将学习如何创建自己的 HTML 音乐播放器; 基于纯代码。 因此，您无需下载任何程序，并且可以在线和离线使用它。
HTML 音乐播放器
目前，您可以通过浏览网页找到数百种播放音乐（或任何类型的音频）的专用程序； 有些比其他的更好等等，有更多的选择和更多的选择。 然而，有可能我们自己，通过使用代码，可以创建我们自己的 HTML 音乐播放器; 当然，它很简单，但它完成了它的功能。
您不需要成为此任务的编码和编程专家，因为事实是，这是一件非常简单且非常容易的事情。
什么是HTML？
在开始介绍文章本身的内容之前，我们认为您了解一点 HTML 是非常重要的； 你可能听说过或在某个时候读到过的东西。
HTML，意味着 超文本标记语言; 这是一种用于网页开发的代码语言。 更具体地说，它是帮助我们组合所有信息、数据、多媒体内容、文本等的代码； 在设计和风格方面，它仍然是另一种代码语言 CSS 的一部分。
当您阅读本文时，您会知道它是使用相同的 HTML 语言完成的； Chrome、Microsoft Edge 等网络浏览器负责“翻译”此代码以向我们显示页面的正常内容。 为了让您更清楚，您现在可以在 Chrome 浏览器中尝试以下快捷方式：Ctrl + Shift + I； 这将打开开发人员工具，您将看到网页未经“翻译”时的实际外观。
已经清楚、简洁地说明了 HTML 代码是什么； 现在我们将展示如何创建您的 音乐播放器.
HTML 中的音乐播放器，代码
要在网络浏览器中查看音乐播放器的外观，请尝试在浏览器中拖动您拥有的曲目； 您将看到它将开始播放并向您显示主要控制器。
正如我们告诉过你的，它非常简单，只需一个按钮 播放/Pause 暂停、时间导航器、数字时间和音量控制器。 基本上，所有其他浏览器都有类似的设计。
如果您正在创建自己的网页和/或博客，并且需要插入音频，这将对您有很大帮助； 尽管如此，您还是可以为自己创建它。 我们建议您有一个网页开发程序来帮助您，尽管使用相同的博客笔记，它也可以。
插入播放器的代码
一旦你有了 HTML5 的网页主体； 允许您插入简单播放器的代码如下：
<audio src="../music/woman.mp3" controls="controls" type="audio/mpeg" preload="preload">
</audio>标签 ” »是什么可以让我们介绍我们的赛道，在其自身内，会有某些属性。 在这种情况下， 型钢, 是我们音乐所在文件夹的地址； 这 Controls, 将向我们展示简单的控制面板； 这 预紧, 是文件的缓冲区加载，以防止它卡住并最终 自动播放，这可能是也可能不是可选的，因为这会使我们的曲目自动开始。
之前的属性，有必要存在，这样我们的 HTML 音乐播放器, 以最佳方式工作。
如果您喜欢并且对计算机世界的这一部分非常感兴趣，那么所有与代码、编程和其他有关的东西； 您可以访问以下文章以开始了解有关此语言和其他代码语言的更多信息： 学习什么编程语言？
创建音乐列表的代码
在上一节中，我们刚刚看到了插入播放器的代码是什么，具有指定的路径，或者更确切地说，具有特定的音频； 所以这不会播放任何其他歌曲，除了您为 «src» 属性选择的歌曲； 因此，如果您想要其他曲目，则必须转到源代码并更改属性的地址，甚至输入另一个播放器，以放置文件夹的新地址。
但是，可以输入另一个代码，但这次是从 Javascript 中输入的，这将允许您输入一个 播放列表，因此您可以创建自己的。
相同的程序或在相同的博客笔记中，将允许您介绍这种新的代码语言。 系统会为您创建一个包含歌曲列表的框，您可以在其中点击选择当前想听的歌曲； 您可以将任意数量的歌曲放在列表中，因为它没有限制。
必要的 Javascript 源代码，以便能够创建自己的 播放列表 并运行你的 HTML 音乐播放器; 如下：
<script>
function cambiarTrack(track) {
var path = track.getAttribute("path")
viejo_audio = document.getElementById("reproductor")
audio_padre = viejo_audio.parentNode
audio_padre.removeChild(viejo_audio)
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")
// nuevo_audio.setAttribute("autoplay", "autoplay")
source = document.createElement("source")
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
nuevo_audio.appendChild(source)
audio_padre.appendChild(nuevo_audio)}
function cargarReproductor() {
var select = document.getElementById("selectTrack")
var path = select.options[0].getAttribute("path")
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")
source = document.createElement("source")
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
nuevo_audio.appendChild(source)
padre = document.getElementById("reproductorBox")
padre.appendChild(nuevo_audio)
}
</script>
<div id="reproductorBox"></div>
<select id = "selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]);">
<option path="../music/take-on-me.mp3">Ah Ah - Take on me</option>
<option path="../music/dust-in-the-wind.mp3">Kansas - Dust in the wind</option>
<option path="../music/how-deep-is-your-love.mp3">Bee Geees - How deep is your love</option>
</select>
<script>cargarReproductor();</script>重要的是，在您看到的每个“选项”标签中，您输入音乐的地址及其名称，如上例所示； 因为播放音频时可能会发生错误。
在下面的视频中，您将能够以更形象的方式看到我们在本文中解释的所有内容，以防您有任何疑问。 除此之外，您还可以使用更复杂的代码和编程语言对其进行自定义等等。