Вот улучшенная версия кода с более ярким, информативным плеером и анимированной картинкой:
copy
предварительный просмотркод
<div class="audio-player"> <img src="https://example.com/animated-music-image.gif" alt="Анимированная музыкальная картинка" class="animated-image"> <div class="player-info"> <h3>Сейчас играет: Название радиостанции</h3> <p>Жанр: Разнообразная музыка</p> </div> <audio id="audio-player" autoplay controls> <source src="https://stream.zeno.fm/ltvjjif6e4cvv" type="audio/mpeg"> Ваш браузер не поддерживает аудио элемент. Попробуйте обновить браузер. </audio> <div class="controls"> <button onclick="document.getElementById('audio-player').play()">Играть</button> <button onclick="document.getElementById('audio-player').pause()">Пауза</button> <input type="range" id="volume" min="0" max="1" step="0.1" value="1" onchange="document.getElementById('audio-player').volume = this.value"> </div> </div> <style>.audio-player { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border-radius: 15px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 400px; margin: 20px auto; text-align: center; color: white; } .animated-image { width: 100%; max-width: 200px; border-radius: 10px; margin-bottom: 15px; } .player-info { margin-bottom: 15px; } audio { width: 100%; margin-bottom: 15px; } .controls button { background-color: #f7b731; border: none; color: white; padding: 10px 20px; margin: 0 5px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .controls button:hover { background-color: #f39c12; } #volume { width: 100%; margin-top: 10px; } </style>
Этот код создает более привлекательный и функциональный аудиоплеер:
- Добавлена анимированная картинка (замените URL на реальную GIF-анимацию).
- Включена информация о радиостанции и жанре.
- Добавлены стилизованные кнопки управления воспроизведением.
- Добавлен ползунок регулировки громкости.
- Использован градиентный фон для привлекательности.
- Добавлены эффекты наведения и тени для улучшения внешнего вида.
Не забудьте заменить "
https://example.com/animated-music-image.gif" на реальный URL вашей анимированной картинки и обновить информацию о радиостанции и жанре в соответствии с вашим контентом.
