V-006 Media medium

How to create a audio player オーディオプレーヤーの作り方

Audio player UI featuring a simulated waveform visualizer. 波形ビジュアライザー風の演出を含むオーディオプレーヤーUI。

ライブデモ Live Demo

Midnight Vibez

Lo-Fi beats

バーの高さ (Max Height) Max Height

速度 (Speed ms) Speed (ms)

バーの色 (Bar Color) Bar Color

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Audio player UI featuring a simulated waveform visualizer.

波形ビジュアライザー風の演出を含むオーディオプレーヤーUI。

どこで使うかWhere to use

content gallery, video player, media library, portfolio showcase

ポッドキャストプレイヤー、音楽プレビュー、オーディオブック、効果音プレビュー

特徴Key features

Custom audio player UI with play/pause, scrubber, volume control, and animated waveform visualizer. Styled to match your design system. Keyboard controls supported. Works with any audio file URL.

再生/一時停止・スクラバー・音量コントロール・アニメーション波形ビジュアライザーを持つカスタムオーディオプレイヤーUI。デザインシステムに合わせたスタイリング。キーボードコントロールサポート。任意のオーディオファイルURLで動作。

調整可能パラメータ Adjustable Parameters

Parameter	Default	Description
`--bar-color`	—	Visualizer bar color
`--play-btn-color`	—	Play button color

実装コード Implementation Code

// react/V-006.jsx
import { useState, useEffect } from 'react';
import './V-006.css';

export default function AudioPlayer() {
  const [playing, setPlaying] = useState(false);
  const [bars, setBars] = useState([10, 15, 12, 18, 10, 8]);

  useEffect(() => {
    let interval;
    if (playing) {
      interval = setInterval(() => {
        setBars(bars.map(() => Math.random() * 40 + 5));
      }, 100);
    } else {
      setBars(bars.map(() => 10)); // reset
    }
    return () => clearInterval(interval);
  }, [playing]);

  return (
    <div className="player-card">
      <div className="visualizer" style={{ position: 'relative', height: 60, background: '#FF9A9E' }}>
        {bars.map((h, i) => <div key={i} className="bar" style={{ height: h }} />)}
      </div>
      <div className="controls" style={{ marginTop: 20 }}>
        <button className="play-btn" onClick={() => setPlaying(!playing)}>
          {playing ? '⏸' : '▶'}
        </button>
      </div>
    </div>
  );
}

/* react/V-006.css */
/* V-006: React styles */
.player-card {
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 20px;
  padding: 24px;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.visualizer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 10px;
}

.bar {
  width: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  height: 10px;
  transition: height 0.1s;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #5c6ac4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: none;
  cursor: pointer;
}

import { useState, useEffect } from 'react';
import './V-006.css';

export default function AudioPlayer() {
  const [playing, setPlaying] = useState(false);
  const [bars, setBars] = useState([10, 15, 12, 18, 10, 8]);

  useEffect(() => {
    let interval;
    if (playing) {
      interval = setInterval(() => {
        setBars(bars.map(() => Math.random() * 40 + 5));
      }, 100);
    } else {
      setBars(bars.map(() => 10)); // reset
    }
    return () => clearInterval(interval);
  }, [playing]);

  return (
    <div className="player-card">
      <div className="visualizer" style={{ position: 'relative', height: 60, background: '#FF9A9E' }}>
        {bars.map((h, i) => <div key={i} className="bar" style={{ height: h }} />)}
      </div>
      <div className="controls" style={{ marginTop: 20 }}>
        <button className="play-btn" onClick={() => setPlaying(!playing)}>
          {playing ? '⏸' : '▶'}
        </button>
      </div>
    </div>
  );
}

/* V-006: React styles */
.player-card {
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 20px;
  padding: 24px;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.visualizer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 10px;
}

.bar {
  width: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  height: 10px;
  transition: height 0.1s;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #5c6ac4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: none;
  cursor: pointer;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

An HTML <audio> element is hidden. JavaScript binds the play/pause button to audio.play() / audio.pause(). The scrubber input[type="range"] syncs with the audio.currentTime and audio.duration. Volume control binds to audio.volume. The waveform is simulated with CSS bar animations or drawn on a Canvas using the Web Audio API AnalyserNode.

HTML <audio>要素は非表示。JavaScriptが再生/一時停止ボタンをaudio.play()/audio.pause()にバインド。スクラバーのinput[type="range"]がaudio.currentTimeとaudio.durationと同期。音量コントロールがaudio.volumeにバインド。波形はCSSバーアニメーションまたはWeb Audio APIのAnalyserNodeを使用してCanvasに描画することでシミュレート。

カスタマイズ方法Customization

Replace the simulated waveform with a real-time Web Audio API visualizer for authentic amplitude data. Add a track title and artist name display. Implement a playlist by loading new src values on track end.

本物の振幅データのためにシミュレートされた波形をリアルタイムのWeb Audio APIビジュアライザーに置き換え。トラックタイトルとアーティスト名の表示を追加。トラック終了時に新しいsrc値をロードしてプレイリストを実装。

注意点Caveats

Provide keyboard shortcuts matching standard media player conventions (Space = play/pause, M = mute, arrow keys = seek/volume). Add aria-label to all controls. Test with a screen reader to ensure the current time and duration are announced.

標準的なメディアプレイヤーの規則に合うキーボードショートカットを提供してください（Space=再生/一時停止、M=ミュート、矢印キー=シーク/音量）。全コントロールにaria-labelを追加してください。スクリーンリーダーで現在時刻と長さがアナウンスされることをテストしてください。

よくある質問 Frequently Asked Questions

How to customize the audio player? Audio Playerをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the audio player in React? ReactでAudio Playerを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of audio player? Audio Playerのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.

以下のUIパターンを実装してください。

- パターンID: V-006
- パターン名: オーディオプレーヤー
- 参照URL: https://devsnips.dev/snippets/audio-player/
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: V-006
- Pattern Name: Audio Player
- Reference URL: https://devsnips.dev/snippets/audio-player/
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]