क्या HTML5 ऑडियो टैग को स्टाइल करना संभव है?

HTML5 ऑडियो टैग स्टाइलिंग

हाँ, HTML5 ऑडियो टैग को स्टाइल किया जा सकता है, लेकिन controls एट्रिब्यूट के साथ ब्राउज़र का डिफ़ॉल्ट प्लेयर OS/ब्राउज़र के अनुसार भिन्न होता है और सीमित स्टाइलिंग योग्य होता है। पूर्ण नियंत्रण के लिए, कस्टम कंट्रोल्स बनाएँ।

विधि 1: डिफ़ॉल्ट कंट्रोल्स (सीमित स्टाइलिंग)

<audio id="player" src="audio.mp3" controls></audio>

<style>
/* केवल कुछ प्रॉपर्टीज काम करती हैं */
audio {
    width: 100%;
    max-width: 400px;
    /* बॉर्डर, बैकग्राउंड, आउटलाइन अधिकांश ब्राउज़र्स में काम नहीं करते */
}

/* WebKit/Blink आंतरिक तत्व (नॉन-स्टैंडर्ड, भंगुर) */
audio::-webkit-media-controls-panel {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
audio::-webkit-media-controls-play-button {
    background: #fff;
    border-radius: 50%;
}
</style>

विधि 2: कस्टम कंट्रोल्स (पूर्ण नियंत्रण - अनुशंसित)

controls एट्रिब्यूट हटाएँ और JavaScript API के साथ अपने कंट्रोल्स बनाएँ:

<!DOCTYPE html>
<html>
<head>
    <style>
        .audio-player {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 20px;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            border-radius: 12px;
            color: white;
            max-width: 500px;
            font-family: 'Segoe UI', sans-serif;
            box-shadow: 0 4px 20px rgba(30, 60, 114, 0.3);
        }
        
        .audio-player button {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .audio-player button:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-1px);
        }
        
        .audio-player button:active {
            transform: translateY(0);
        }
        
        .audio-player button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .progress-container {
            flex: 1;
            height: 6px;
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
        }
        
        .progress-bar {
            height: 100%;
            background: #00d4aa;
            border-radius: 3px;
            width: 0%;
            transition: width 0.1s linear;
        }
        
        .time-display {
            font-size: 13px;
            font-variant-numeric: tabular-nums;
            min-width: 90px;
        }
        
        .volume-control {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .volume-slider {
            width: 80px;
            accent-color: #00d4aa;
        }
        
        .track-info {
            flex: 1;
            min-width: 0;
        }
        
        .track-title {
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .track-artist {
            font-size: 12px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="audio-player">
        <div class="track-info">
            <div class="track-title" id="trackTitle">कलिम्बा धुन</div>
            <div class="track-artist">अज्ञात कलाकार</div>
        </div>
        
        <button id="playBtn" onclick="togglePlay()" aria-label="चलाएँ">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path id="playIcon" d="M8 5v14l11-7z"></path>
                <path id="pauseIcon" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" style="display:none"></path>
            </svg>
        </button>
        
        <div class="progress-container" id="progressContainer" onclick="seek(event)">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <div class="time-display">
            <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
        </div>
        
        <div class="volume-control">
            <button onclick="toggleMute()" id="muteBtn" aria-label="म्यूट">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path id="volHigh" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"></path>
                    <path id="volMute" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3z" style="display:none"></path>
                </svg>
            </button>
            <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="1" oninput="setVolume(this.value)">
        </div>
    </div>
    
    <!-- छिपा हुआ ऑडियो तत्व -->
    <audio id="audio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" preload="metadata"></audio>
    
    <script>
        const audio = document.getElementById('audio');
        const playBtn = document.getElementById('playBtn');
        const playIcon = document.getElementById('playIcon');
        const pauseIcon = document.getElementById('pauseIcon');
        const progressBar = document.getElementById('progressBar');
        const progressContainer = document.getElementById('progressContainer');
        const currentTimeEl = document.getElementById('currentTime');
        const durationEl = document.getElementById('duration');
        const volumeSlider = document.getElementById('volumeSlider');
        const muteBtn = document.getElementById('muteBtn');
        const volHigh = document.getElementById('volHigh');
        const volMute = document.getElementById('volMute');
        
        function formatTime(seconds) {
            if (isNaN(seconds)) return '0:00';
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }
        
        function togglePlay() {
            if (audio.paused) {
                audio.play();
                playIcon.style.display = 'none';
                pauseIcon.style.display = 'block';
            } else {
                audio.pause();
                playIcon.style.display = 'block';
                pauseIcon.style.display = 'none';
            }
        }
        
        function seek(e) {
            const rect = progressContainer.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            audio.currentTime = percent * audio.duration;
        }
        
        function setVolume(value) {
            audio.volume = value;
            updateVolumeIcon();
        }
        
        function toggleMute() {
            audio.muted = !audio.muted;
            updateVolumeIcon();
        }
        
        function updateVolumeIcon() {
            if (audio.muted || audio.volume === 0) {
                volHigh.style.display = 'none';
                volMute.style.display = 'block';
            } else {
                volHigh.style.display = 'block';
                volMute.style.display = 'none';
            }
        }
        
        audio.addEventListener('timeupdate', () => {
            const percent = (audio.currentTime / audio.duration) * 100;
            progressBar.style.width = percent + '%';
            currentTimeEl.textContent = formatTime(audio.currentTime);
        });
        
        audio.addEventListener('loadedmetadata', () => {
            durationEl.textContent = formatTime(audio.duration);
        });
        
        audio.addEventListener('ended', () => {
            playIcon.style.display = 'block';
            pauseIcon.style.display = 'none';
            progressBar.style.width = '0%';
        });
        
        audio.addEventListener('volumechange', updateVolumeIcon);
    </script>
</body>
</html>

Web Audio API के साथ उन्नत विज़ुअलाइज़ेशन

<canvas id="visualizer" width="500" height="100"></canvas>

<script>
const audio = document.getElementById('audio');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const source = audioCtx.createMediaElementSource(audio);
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;

source.connect(analyser);
analyser.connect(audioCtx.destination);

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

function visualize() {
    requestAnimationFrame(visualize);
    analyser.getByteFrequencyData(dataArray);
    
    ctx.clearRect(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] / 255) * canvas.height;
        const hue = (i / bufferLength) * 360;
        
        ctx.fillStyle = `hsl(${hue}, 80%, 50%)`;
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
        x += barWidth + 1;
    }
}

audio.addEventListener('play', () => {
    if (audioCtx.state === 'suspended') audioCtx.resume();
    visualize();
});
</script>