js 音频流播放器 (1)

📌 相关文章

📜 js 音频流播放器 (1)

📅 最后修改于: 2023-12-03 15:32:24.743000 🧑 作者: Mango

JS 音频流播放器

简介

JS 音频流播放器是一个基于 JavaScript 的音频播放器，可用于在网页上播放来自网络的音频流。

功能

播放 / 暂停音频流
调整音量大小
显示当前播放时间和总时长
调整播放进度条
可以检测流的结束并在自动播放

实现

HTML

播放器需要一个 HTML 文件来承载。这里是一个简单的 HTML 模板：

<html>
  <head>
    <title>JS 音频流播放器</title>
  </head>
  <body>
    <audio controls id="audioStream">
      <source src="" type="audio/mpeg" />
    </audio>
    <script src="audioPlayer.js"></script>
  </body>
</html>

JavaScript

JavaScript 代码包括音频播放器的所有逻辑。它使用 HTML5 中的 Audio 对象来播放音频流。这是 JavaScript 文件的主要部分：

// 音频流 URL
const streamUrl = "https://example.com/stream.mp3";

// 获取 HTML 中的音频元素
const audioElement = document.getElementById("audioStream");

// 将音频流 URL 分配给音频元素
audioElement.src = streamUrl;

// 播放音频
audioElement.play();

// 显示当前播放时间和总时长
audioElement.addEventListener("timeupdate", function() {
  const currentTime = audioElement.currentTime;
  const duration = audioElement.duration;
  // 更新播放时间和总时长的元素
});

// 调整音量大小
function setVolume(volume) {
  audioElement.volume = volume;
}

// 调整播放进度条
function setCurrentTime(time) {
  audioElement.currentTime = time;
}

// 检测流的结束并在自动播放
audioElement.addEventListener("ended", function() {
  // 播放其他音频流或重新播放当前流
});

总结

JS 音频流播放器是一个非常简单的工具，可用于在网站上播放来自网络的音频流。它只需要 JavaScript 和 HTML 文件，不需要任何其他库或框架。提供了一些基本的功能，如从流中读取当前时间和总时间以及自动检测流的结束。可以根据自己的需求扩展它。