使用 Video.js 播放器播放 MP3

在本教程中，我们将学习如何使用 video.js 播放器播放 mp3 文件或音频文件。使用 video.js 播放 mp3 文件与在标准 HTML5 中播放音频文件有些类似，但 video.js 支持 mp3 文件需要一些额外的步骤。

使用 video.js 播放 mp3 文件的优势

使用 video.js 构建 mp3 播放器将为您提供更多对音频文件的控制。所有特定于 video.js 的功能都可以在音频上使用，从而提供更大的灵活性。

如何使用 video.js 播放器播放 Mp3？

要创建音频播放器，我们需要创建一个 <audio> 元素，然后向其添加 video.js 类。之后，需要将音频文件的类型更改为文件的格式。例如 - 在我们的例子中，我们将为 mp3 文件创建一个音频播放器，因此我们在 HTML 中的文件类型将是“audio/mp3”

现在，让我们来看一个创建将播放 mp3 文件格式的播放器的示例。

示例

请考虑以下示例 -

<!DOCTYPE html>
<html>
<head>
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
</head>
<body>
      <audio
         class="video-js vjs-default-skin"
         id="audio_example"
         data-setup='{}'
         controls="true"
         preload="auto">
      >
      <source
         src="https://tutorialspoint.com/videos/sample.mp3"
         type='audio/mp3'
         id='my_audio_file'
      >
      </audio>
      <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
</body>
</html>

在上面的示例中，我们做了以下操作 -

  • 使用 CDN Url 在 <link> 标签的属性中包含 video.js。

  • 在 <body> 部分中，创建了一个音频元素，其类为“video-js vjs-default-skin”。这将使用 video.js 类作为 video.js 播放器的默认皮肤。我们还为 <audio> 标签提供了“id”作为“audio_example”。

  • 接下来，我们在音频标签上使用了 data-setup='{}'，以确保如果我们的音频元素在网页加载时没有被浏览器预加载，那么 video.js 稍后可以加载音频元素。

  • controls='true' 将在我们的音频播放器上显示一些基本的播放/暂停控件。

  • 在 <source> 标签中，我们提供了音频文件“sample.mp3”的路径，并添加了文件的 MIME 类型，即“type=audio/mp3”。执行此示例时，请确保输入音频文件的路径。

  • 在 <script> 标签中，我们添加了 video.js 文件的路径，以将其包含在我们的本地项目中。

执行以上代码将在您的浏览器中创建一个音频播放器，该播放器将播放我们的音频文件。

要点

由于音频或 mp3 文件没有太多视觉效果，并且只有音频播放器控件将在浏览器中显示。因此，在 <audio> 元素上使用“controls=true”属性非常重要，否则您的音频文件将隐藏在您的网页上。

现在，我们已经了解了如何使用 video.js 播放 mp3 文件，我将通过扩展音频播放器的功能向您展示更多示例。

向 mp3 文件添加图像/专辑封面

通常音频文件没有视觉元素，因此我们的音频播放器仅在浏览器中显示播放和暂停音频文件的控件。

但我们也可以为音频播放器添加图像海报或专辑封面，使其更具吸引力。

要向音频文件添加图像元素，我们必须首先调整音频播放器的高度和宽度以适应图片。然后，我们需要在“poster”属性中传递图像文件的路径。“Poster”属性仅在使用标准 HTML 时受 <video> 标签支持，但由于 video.js，"poster" 属性也可以用于音频文件，使您可以选择在 mp3 上添加专辑封面。

示例

请考虑以下示例，以向 mp3 文件添加图像海报，

<DOCTYPE html>
<html>
<head>
   <!link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
</head>
<body>
      <audio
         class="video-js vjs-default-skin"
         id="audio_example"
         width="560"
         height="300"
         poster="https://tutorialspoint.com/videos/sample.png"
         data-setup='{}'
         controls="true"
         autoplay="false"
         preload="auto"
      >
      <source
         src="https://tutorialspoint.com/videos/sample.mp3"
         type='audio/mp3'
         id='my_audio_file_1'
      >
      </audio>
      <script src="https://vjs.zencdn.net/7.19.2/video.min.js""> </script>
</body>
</html>

在上面的代码片段中，我们首先添加了一个 mp3 文件并为该文件创建了一个音频播放器。此外，我们还将 video.js 类添加到音频元素。

除此之外，还使用了'height'、'width' 和'poster' 属性来在 mp3 文件上添加图像海报。“poster”属性具有音频的专辑封面路径，并且高度和宽度为“700”，定义了图像海报的尺寸。

执行以上代码将在浏览器中创建一个音频播放器，该播放器将播放 mp3 文件，并且将在音频播放器控件上方看到尺寸为“700×300”的图像海报。

注意 - 要运行以上示例，请将 <source> 元素中的“src”值替换为您自己的 mp3 文件的路径，并将“poster”属性的值替换为图像文件。

结论

在本教程中，我们学习了如何使用 video.js 包播放 mp3 文件。此外，我们还看到了一些如何使用控件创建音频播放器以播放 mp3 文件的示例。在最后一个示例中，我们了解了如何向音频文件添加图像海报，以使音频播放器更友好。

更新于：2023年1月18日

2K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告