Бесплатная онлайн фонотека. Звуки, шумовые эффекты, сэмплы и музыка - так много только у нас!
Войти на сайт
Новые файлы
Поиск файлов
Фрагменты музыки (Loops)
Паблик ВКонтакте
Wave Surfer Audio Player

Wave Surfer audio player


Крутой аудио плеер с визуализацией дорожки
«версия от wav-library.net»

Демонстрация работы:

Ниже представлен готовый вариант аудио плеера для нашего сайта (не исключено, что внешний вид и функционал будет меняться). Пока, вы можете увидеть на наглядном примере работу и некоторые функции данного плеера, функций кстати у плеера огромное количество.

Wavesurfer.js построен с использованием Web Audio API и HTML5 Canvas.

00:00
Ожидание запуска
Визуализация дорожки, построение пиков и шкалы времени ...
Нажмите PLAY для инициализации и воспроизведения трека
  

Быстрый старт

Подключите главный скрипт:


<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>

Создайте контейнер для отображения плеера:


<div id="waveform"></div>

Создайте JavaScript с минимальными параметрами:


var wavesurfer = WaveSurfer.create ({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});

И подключите ссылку к медиа файлу:


wavesurfer.load('audio.wav');

Подробная документация, список функций, методов, событий, а также примеры других плееров и плагинов к нему, ищите на сайте wavesurfer-js.org.

Больше различных вариантов исполнения данного скрипта ищите на сайте codepen.io