AI向け説明 AI Description

`V-006` は音楽再生 UI のパターンです。HTMLAudioElement (または Web Audio API) と連携することを想定しています。デモでは CSS Animation または JS のループでバーの高さをランダムに変更し、再生中のビジュアライザーをシミュレートしています。

`V-006` is an audio player interface pattern. It simulates a visualizer using CSS/JS animations on bars, designed to interface with HTMLAudioElement or Web Audio API in a real app.

調整可能パラメータ Adjustable Parameters

• --bar-color — ビジュアライザーバーの色Visualizer bar color
• --play-btn-color — 再生ボタンの色Play button color

実装 Implementation

HTML + CSS + JS

<button id="play">Play</button>
<div class="visualizer">
  <div class="bar"></div><div class="bar"></div>
</div>

<script>
const bars = document.querySelectorAll('.bar');
let playing = false;
setInterval(() => {
  if (!playing) return;
  bars.forEach(bar => {
    bar.style.height = Math.random() * 40 + 'px';
  });
}, 100);
</script>

React (JSX + CSS)

// 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;
}