跨瀏覽器音訊基礎

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg" />
  <source src="audio-file.ogg" type="audio/ogg" />
  <!-- fallback for non-supporting browsers goes here -->
  <p>
    Your browser does not support HTML audio, but you can still
    <a href="audio-file.mp3">download the music</a>.
  </p>
</audio>

<audio autoplay>…</audio>

<audio loop>…</audio>

<audio muted>…</audio>

<audio preload="auto">…</audio>

<audio controls>…</audio>

<audio src="audio-file.mp3">…</audio>

<audio src="audio-file.mp3" type="audio/mpeg">…</audio>

<audio id="my-audio" src="audio-file.mp3">…</audio>

const audio = document.getElementById("my-audio");

const audio = document.createElement("audio");

if (audio.canPlayType("audio/mpeg")) {
  audio.setAttribute("src", "audio-file.mp3");
}

if (audio.canPlayType("audio/ogg")) {
  audio.setAttribute("src", "audio-file.ogg");
}

alert("play");

audio.play();

alert("stop");

audio.pause();

alert("play from 5 seconds in");

audio.currentTime = 5;
audio.play();

audio.play();

audio.pause();

if (audio.canPlayType("audio/mpeg")) {
  // It's supported.
  // Do something here!
}

if (audio.currentTime > 5) {
  audio.currentTime = 3;
}

// set the volume at 50%
audio.volume = 0.5;

<audio id="my-audio">
  <source src="audio-file.mp3" type="audio/mpeg" />
  <source src="audio-file.ogg" type="audio/ogg" />
  <!-- place fallback here as <audio> supporting browsers will ignore it -->
  <p>Download<a href="audio-file.mp3">audio-file.mp3</a></p>
</audio>

<!-- custom play and pause buttons -->
<button id="play">play</button>
<button id="pause">pause</button>

const audio = document.getElementById("my-audio");
const play = document.getElementById("play");
const pause = document.getElementById("pause");

// associate functions with the 'onclick' events
play.onclick = playAudio;
pause.onclick = pauseAudio;

function playAudio() {
  audio.play();
}

function pauseAudio() {
  audio.pause();
}

audio.addEventListener("loadstart", () => {
  // Grabbing the file
});

audio.addEventListener("durationchange", () => {
  // You can display the duration now
});

audio.addEventListener("loadedmetadata", () => {
  // You can display the duration now
});

audio.addEventListener("loadeddata", () => {
  // You could display the playhead now
});

audio.addEventListener("progress", () => {
  // you could let the user know the media is downloading
});

audio.addEventListener("canplay", () => {
  // Audio is ready to play
});

audio.addEventListener("canplaythrough", () => {
  // Audio is ready to play all the way through
});

audio.addEventListener("timeupdate", () => {
  // Update something related to playback progress
});

audio.addEventListener("ended", () => {
  // Do something once audio track has finished playing
});

<audio id="my-audio">
  <source
    src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3"
    type="audio/mpeg" />
  <source
    src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg"
    type="audio/ogg" />
  <!-- place fallback here as <audio> supporting browsers will ignore it -->
  <a href="audio-file.mp3">audio-file.mp3</a>
</audio>

<div id="controls">
  <span id="loading">loading</span>
  <button id="play">play</button>
  <button id="pause">pause</button>
</div>
<div id="progress">
  <div id="bar"></div>
</div>

#controls {
  width: 80px;
  float: left;
}

#progress {
  margin-left: 80px;
  border: 1px solid black;
}

#bar {
  height: 20px;
  background-color: green;
  width: 0;
}

#play,
#pause {
  display: none; /* hide until media is ready */
}

const audio = document.getElementById("my-audio");
const play = document.getElementById("play");
const pause = document.getElementById("pause");
const loading = document.getElementById("loading");
const bar = document.getElementById("bar");

function displayControls() {
  loading.style.display = "none";
  play.style.display = "block";
}

// Check that the media is ready before displaying the controls
if (audio.paused) {
  displayControls();
} else {
  // not ready yet - wait for canplay event
  audio.addEventListener("canplay", () => {
    displayControls();
  });
}

play.addEventListener("click", () => {
  audio.play();
  play.style.display = "none";
  pause.style.display = "block";
});

pause.addEventListener("click", () => {
  audio.pause();
  pause.style.display = "none";
  play.style.display = "block";
});

// Display progress
audio.addEventListener("timeupdate", () => {
  // Sets the percentage
  bar.style.width = `${Math.floor(
    (audio.currentTime / audio.duration) * 100,
  )}%`;
});

#progress {
  margin-left: 80px;
  border: 1px solid black;
  cursor: pointer;
}

const progress = document.getElementById("progress");

progress.addEventListener("click", (e) => {
  // Calculate the normalized position clicked
  const clickPosition = (e.pageX - progress.offsetLeft) / progress.offsetWidth;
  const clickTime = clickPosition * audio.duration;

  // Move the playhead to the correct position
  audio.currentTime = clickTime;
});

bufferedTimeRanges = audio.buffered;

seekableTimeRanges = audio.seekable;