js实现音频播放

使用HTML5 Audio API

HTML5提供了<audio>元素和JavaScript的Audio对象，可以轻松实现音频播放功能。以下是基本实现方法：

// 创建Audio对象
const audio = new Audio('audio-file.mp3');

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

// 暂停音频
audio.pause();

// 设置音量(0-1)
audio.volume = 0.5;

// 跳转到特定时间(秒)
audio.currentTime = 30;

添加播放控制

可以结合HTML按钮实现播放控制：

<audio id="myAudio" src="audio-file.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>

使用Web Audio API

对于更高级的音频处理，可以使用Web Audio API：

// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 加载音频文件
fetch('audio-file.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    const source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(audioContext.destination);
    source.start();
  });

处理播放事件

可以监听音频的各种事件：

const audio = new Audio('audio-file.mp3');

audio.addEventListener('canplay', () => {
  console.log('音频可以播放了');
});

audio.addEventListener('ended', () => {
  console.log('音频播放结束');
});

audio.addEventListener('error', () => {
  console.error('播放出错');
});

跨浏览器兼容性

确保代码在主流浏览器中都能工作：

// 检测浏览器是否支持Audio API
if (typeof Audio !== 'undefined') {
  // 使用Audio API
} else {
  console.error('浏览器不支持Audio API');
}

// 检测是否支持Web Audio API
if (typeof AudioContext !== 'undefined' || typeof webkitAudioContext !== 'undefined') {
  // 使用Web Audio API
} else {
  console.error('浏览器不支持Web Audio API');
}

响应式音频控制

结合CSS和JavaScript创建响应式音频播放器：

<div class="audio-player">
  <button class="play-btn">播放</button>
  <input type="range" class="volume" min="0" max="1" step="0.1" value="0.7">
  <span class="time">0:00</span>
</div>

<script>
  const audio = new Audio('audio-file.mp3');
  const playBtn = document.querySelector('.play-btn');
  const volumeControl = document.querySelector('.volume');

  playBtn.addEventListener('click', () => {
    if (audio.paused) {
      audio.play();
      playBtn.textContent = '暂停';
    } else {
      audio.pause();
      playBtn.textContent = '播放';
    }
  });

  volumeControl.addEventListener('input', () => {
    audio.volume = volumeControl.value;
  });

  audio.addEventListener('timeupdate', () => {
    document.querySelector('.time').textContent = 
      `${Math.floor(audio.currentTime / 60)}:${Math.floor(audio.currentTime % 60).toString().padStart(2, '0')}`;
  });
</script>