HTML - オーディオプレイヤー

ウェブ開発志望者、ようこそ！今日はHTMLオーディオプレイヤーの楽しい世界に飛び込みます。このチュートリアルの最後に、あなたは自分でカスタムオーディオプレイヤーを作成し、さらにクールなビジュアルエフェクトを追加できるようになります。では、コードを書く帽子をかぶり、音楽の旅を始めましょう！

HTML - Audio Player

HTML ローカルオーディオプレイヤーとビジュアライザー

HTMLオーディオの基本

まず、豪華なオーディオプレイヤーを作成する前に、基本から始めましょう。HTML5は<audio>要素を導入し、ウェブページにオーディオを追加するのが非常に簡単になりました。以下は簡単な例です：

<audio controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
あなたのブラウザはオーディオ要素をサポートしていません。
</audio>

このコードでは：

<audio>タグはオーディオプレイヤーを作成します。
controls属性は再生、停止、ボリュームコントロールを追加します。
<source>タグは再生するオーディオファイルを指定します。
<audio>要素をサポートしないブラウザにはフォールバックメッセージを含めます。

カスタムオーディオプレイヤーの作成

次に、もっとカスタムなオーディオプレイヤーを作成しましょう。HTML、CSS、JavaScriptを使ってこれを作成します：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カスタムオーディオプレイヤー</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">再生</button>
<input type="range" id="seek-bar" value="0">
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');

playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '停止';
} else {
audio.pause();
playPauseBtn.textContent = '再生';
}
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});
</script>
</body>
</html>

これを分解すると：

我们创建了一个自定义播放器的容器<div>。
里面有一个<audio>要素（控件不可用）、再生/停止ボタン、およびシークバー。
JavaScriptでは：

ボタンをクリックすると再生/停止を切り替えます。
オーディオが再生されるたびにシークバーを更新します。
シークバーをクリックするとシークが可能になります。

ビジュアライザーの追加

次に、シンプルなビジュアライザーを追加してプレイヤーをさらに魅力的にします。Web Audio APIを使います：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>オーディオプレイヤーとビジュアライザー</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#visualizer {
width: 300px;
height: 150px;
background-color: #000;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">再生</button>
<input type="range" id="seek-bar" value="0">
<canvas id="visualizer"></canvas>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');

// オーディオコンテキストの設定
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

// 再生/停止機能
playPauseBtn.addEventListener('click', () => {
if (audioContext.state === 'suspended') {
audioContext.resume();
}
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '停止';
} else {
audio.pause();
playPauseBtn.textContent = '再生';
}
});

// シークバー機能
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

// ビジュアライザー
function drawVisualizer() {
requestAnimationFrame(drawVisualizer);

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;

for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;

ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

x += barWidth + 1;
}
}

drawVisualizer();
</script>
</body>
</html>

この強化版では：

<canvas>要素をビジュアライザーとして追加します。
Web Audio APIを使ってオーディオコンテキストとアナライザーを設定します。
drawVisualizer関数でオーディオ周波数の棒グラフを描画します。

ローカルオーディオプレイヤーとプレイリスト

次に、複数のトラックを扱うプレイヤーを作成しましょう：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プレイリスト付きオーディオプレイヤー</title>
<style>
#playlist-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn, #prev-btn, #next-btn {
width: 80px;
height: 30px;
margin: 5px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#playlist {
list-style-type: none;
padding: 0;
}
#playlist li {
cursor: pointer;
padding: 5px;
}
#playlist li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="playlist-player">
<audio id="audio-element"></audio>
<button id="prev-btn">前へ</button>
<button id="play-pause-btn">再生</button>
<button id="next-btn">次へ</button>
<input type="range" id="seek-bar" value="0">
<ul id="playlist">
<li data-src="song1.mp3">曲1</li>
<li data-src="song2.mp3">曲2</li>
<li data-src="song3.mp3">曲3</li>
</ul>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const seekBar = document.getElementById('seek-bar');
const playlist = document.getElementById('playlist');
let currentTrack = 0;

function loadTrack(index) {
const tracks = playlist.getElementsByTagName('li');
if (index >= 0 && index < tracks.length) {
currentTrack = index;
audio.src = tracks[currentTrack].getAttribute('data-src');
audio.load();
playPauseBtn.textContent = '再生';
}
}

function playPause() {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '停止';
} else {
audio.pause();
playPauseBtn.textContent = '再生';
}
}

prevBtn.addEventListener('click', () => {
loadTrack(currentTrack - 1);
});

nextBtn.addEventListener('click', () => {
loadTrack(currentTrack + 1);
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

playlist.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
loadTrack([...playlist.getElementsByTagName('li')].indexOf(e.target));
playPause();
}
});

loadTrack(0);
</script>
</body>
</html>

このプレイリスト版では：

プレイリストを非orderedリストで作成します。
前へ、再生、次へボタンを追加します。
JavaScriptでトラックのロード、再生/停止、シークバー機能を設定します。

これで、基本から高级までのオーディオプレイヤーを作成する方法を学びました。これを基に、さらにカスタマイズして、あなた独自のオーディオプレイヤーを作成してください！

Credits: Image by storyset