当前位置：首页 > JavaScript

js实现播放

2026-04-05 20:16:17JavaScript

实现音频播放

使用HTML5的<audio>元素结合JavaScript可以轻松实现音频播放功能。以下是基础实现代码：

<audio id="myAudio" src="audio-file.mp3"></audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

<script>
function playAudio() {
  document.getElementById("myAudio").play();
}

function pauseAudio() {
  document.getElementById("myAudio").pause();
}
</script>

控制视频播放

通过<video>元素实现视频播放控制，方法与音频类似：

js实现播放

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<script>
const video = document.getElementById("myVideo");

function playVideo() {
  video.play();
}

function pauseVideo() {
  video.pause();
}
</script>

动态加载媒体资源

需要动态加载不同媒体文件时，可以修改src属性：

js实现播放

function changeMedia(source) {
  const media = document.getElementById("myMedia");
  media.src = source;
  media.load();
  media.play();
}

添加播放事件监听

监听播放状态变化可以实现更复杂的交互：

const media = document.getElementById("myMedia");

media.addEventListener('play', function() {
  console.log('媒体开始播放');
});

media.addEventListener('ended', function() {
  console.log('媒体播放结束');
});

使用Web Audio API

对于需要高级音频处理的场景，可以使用Web Audio API：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let source;

function playBuffer(buffer) {
  source = audioContext.createBufferSource();
  source.buffer = buffer;
  source.connect(audioContext.destination);
  source.start(0);
}

// 加载音频文件
fetch('audio-file.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => playBuffer(audioBuffer));

标签: js