Создание простого аудиоплеера с помощью SoundManager 2

 <div class="player"> <div class="player__audio-info"> <div> Played <span class="player__time-elapsed">-</span> of <span class="player__time-total">-</span> <button class="player__previous button button--small">Move back</button> <button class="player__next button button--small">Move forth</button> </div> <div> Volume: <span class="player__volume-info">100</span> <button class="player__volume-down button button--small">Volume down</button> <button class="player__volume-up button button--small">Volume up</button> </div> </div> <button class="player__play button button--large">Play</button> <button class="player__stop button button--large">Stop</button> </div> 

Как вы можете видеть, я использовал нотацию БЭМ для именования классов, используемых для стилизации элементов разметки. Некоторые из вас могут утверждать, что для такого простого примера это излишне. Хотя это, безусловно, верно, я убежден, что хорошие привычки начинаются с использования технологии или методологии с простых примеров, а затем на их основе. Мое мнение таково, что начинать со сложного проекта не идеально для того, кто только начал учиться. Это объясняет, почему я использовал его в этом проекте.

В дополнение к нотации БЭМ вы, возможно, заметили, что я использовал элемент button для разметки кнопок. Это может показаться довольно очевидным, но это не так. Многие разработчики в этой ситуации использовали a элементы или span ; но элементы должны вести пользователя куда-то, а button — это элемент, который нужно использовать, когда элемент должен что- то делать . И наш игрок должен что-то сделать.

Теперь, когда у нас есть разметка, давайте ее стилизуем.

Добавление немного стиля

Я оставлю стили для этого проекта довольно простыми. У игрока будет серый фон и черная рамка, чтобы выделить его границы. Я также «сброслю» стиль button по умолчанию button чтобы они не выглядели как обычные кнопки, а вместо этого отображали соответствующие значки. Наконец, чтобы переключиться с кнопки «воспроизведение» на кнопку «пауза», я создам класс is-playing который четко помечает состояние аудиофайла путем изменения отображаемого значка.

Полные стили для нашего игрока показаны ниже:

 .player { display: inline-block; width: 300px; padding: 5px; background-color: #E3E3E3; border: 1px solid #000000; } .player span { font-weight: bold; } .button { text-indent: 200%; white-space: nowrap; overflow: hidden; border: none; padding: 0; background: rgba(255,255,255,0); cursor: pointer; vertical-align: bottom; } .button--small { width: 19px; height: 19px; } .button--large { width: 48px; height: 48px; } .player__audio-info { padding-bottom: 5px; border-bottom: 1px dotted #000000; } .player__audio-info div + div { margin-top: 10px; } .player__volume-info { display: inline-block; width: 1.5em; } .player__play { background-image: url("http://i60.tinypic.com/14mbep2.png"); } .player__play.is-playing { background-image: url("http://i57.tinypic.com/idyhd2.png"); } .player__stop { background-image: url("http://i61.tinypic.com/35mehdz.png"); } .player__previous { background-image: url("http://i60.tinypic.com/sdihc5.png"); } .player__next { background-image: url("http://i57.tinypic.com/2s1nm77.png"); } .player__volume-down { background-image: url("http://i60.tinypic.com/331nom0.png"); } .player__volume-up { background-image: url("http://i60.tinypic.com/ekkc1t.png"); } 

Развитие поведения

Мы наконец-то добрались до сути нашего проекта — бизнес-логики. Как вы увидите, это не очень сложно, но для того, чтобы иметь больше поддерживаемого кода, мы создадим функцию поддержки с именем formatMilliseconds и объект с именем player . Как следует из названия, функция используется для преобразования заданного количества миллисекунд в строку. Более конкретно, строка будет отформатирована как «H: MM: SS: mmm», так как мы будем использовать ее, чтобы показать общую продолжительность аудиофайла и прошедшее время. Объект player будет использоваться для хранения элементов плеера, чтобы нам не приходилось каждый раз получать их. Это позволяет нам повысить производительность нашего проекта. Наконец, мы будем использовать audio переменную для хранения экземпляра объекта, который представляет наш аудио файл, созданный с помощью SoundManager 2.

Функция и переменные, которые мы только что описали, показаны ниже:

 function formatMilliseconds(milliseconds) { var hours = Math.floor(milliseconds / 3600000); milliseconds = milliseconds % 3600000; var minutes = Math.floor(milliseconds / 60000); milliseconds = milliseconds % 60000; var seconds = Math.floor(milliseconds / 1000); milliseconds = Math.floor(milliseconds % 1000); return (hours > 0 ? hours : '0') + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds + ':' + (milliseconds < 100 ? '0' : '') + (milliseconds < 10 ? '0' : '') + milliseconds; } var player = { btnPlay: document.querySelector('.player__play'), btnStop: document.querySelector('.player__stop'), btnPrevious: document.querySelector('.player__previous'), btnNext: document.querySelector('.player__next'), btnVolumeDown: document.querySelector('.player__volume-down'), btnVolumeUp: document.querySelector('.player__volume-up'), timeElapsed: document.querySelector('.player__time-elapsed'), timeTotal: document.querySelector('.player__time-total'), volume: document.querySelector('.player__volume-info') }; var audio = null; 

На этом этапе мы должны создать новый объект, который представляет наш аудиофайл, что означает, что мы должны присвоить значение нашей audio . Мы сделаем это с помощью createSound() предоставленного библиотекой. Это позволяет нам определить несколько свойств, но наиболее важными из них являются id , который назначает идентификатор аудиофайлу, и url , где вы можете установить URL-адрес аудиофайла.

Создание этого объекта выполняется внутри анонимной функции, которая выполняется при ready события ready библиотеки, что означает, что библиотека выполнила все свои действия и готова к использованию. Мы можем указать, что делать при ready события ready , и другие параметры, передавая литерал объекта в метод setup() .

Это также то место, где вы должны указать Flash-проигрыватель SoundManager 2 для использования в качестве запасного варианта. Это установлено в коде ниже:

 soundManager.setup({ useFastPolling: true, useHighPerformance: true, onready: function() { audio = soundManager.createSound({ id: 'audio', url: 'http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3', whileloading: function() { player.timeTotal.textContent = formatMilliseconds(audio.durationEstimate); }, whileplaying: function() { player.timeElapsed.textContent = formatMilliseconds(audio.position); }, onload: function() { player.timeTotal.textContent = formatMilliseconds(audio.duration); }, onfinish: function() { var event; try { // Internet Explorer does not like this statement event = new Event('click'); } catch (ex) { event = document.createEvent('MouseEvent'); event.initEvent('click', true, false); } player.btnStop.dispatchEvent(event); } }); } }); 

После того, как мы создали экземпляр объекта, представляющего аудиофайл, мы должны добавить прослушиватель событий для каждой из кнопок нашего проигрывателя. Здесь наш объект player вступает в игру. Используя его, мы можем ссылаться на кнопки и другие элементы плеера, не выполняя каждый раз новый выбор. Именно здесь библиотека SoundManager 2 показывает, насколько просто ее использовать. Например, предположим, что вы хотите воспроизвести аудио: как вы думаете, какой метод предоставляет библиотека? play() , конечно! А что если мы хотим остановить звук? Для этого у нас есть stop() . Теперь, что, если мы хотим знать, приостановлен ли аудиофайл или нет? Библиотека предоставляет логическое свойство paused . Для общей продолжительности у нас есть свойство duration вместо этого. Очень просто, не правда ли?

Чтобы изменить громкость и переместить текущую позицию звука, у нас есть два метода: setVolume() и setPosition() . Каждый из них принимает одно число, которое обновляет значение, которое вы хотите изменить. Например, если вы хотите установить громкость на 50 (шкала от 0 до 100), вы можете написать:

 audio.setVolume(50); 

Если вы хотите переместить позицию на 10 секунд с начала, вы можете написать:

 audio.setPosition(10000); 

Предоставленное значение равно 10000, потому что метод принимает миллисекунды.

Оставшаяся часть кода, которая реализует описанные нами функции, представлена ​​ниже:

 player.btnPlay.addEventListener('click', function() { if (audio === null) { return; } if (audio.playState === 0 || audio.paused === true) { audio.play(); this.classList.add('is-playing'); } else { audio.pause(); this.classList.remove('is-playing'); } }); player.btnStop.addEventListener('click', function() { if (audio === null) { return; } audio.stop(); document.querySelector('.player__time-elapsed').textContent = formatMilliseconds(0); player.btnPlay.classList.remove('is-playing'); }); player.btnVolumeDown.addEventListener('click', function() { if (audio === null) { return; } var volume = audio.volume - 10 < 0 ? 0 : audio.volume - 10; audio.setVolume(volume); player.volume.textContent = volume; }); player.btnVolumeUp.addEventListener('click', function() { if (audio === null) { return; } var volume = audio.volume + 10 > 100 ? 100 : audio.volume + 10; audio.setVolume(volume); player.volume.textContent = volume; }); player.btnPrevious.addEventListener('click', function() { if (audio === null) { return; } var position = audio.position - 30000 < 0 ? 0 : audio.position - 30000; audio.setPosition(position); player.timeElapsed.textContent = formatMilliseconds(audio.position); }); player.btnNext.addEventListener('click', function() { if (audio === null) { return; } var position = audio.position + 30000 > audio.duration ? audio.duration : audio.position + 30000; if (position === audio.duration) { var event; try { // Internet Explorer does not like this statement event = new Event('click'); } catch (ex) { event = document.createEvent('MouseEvent'); event.initEvent('click', true, false); } player.btnStop.dispatchEvent(event); } else { audio.setPosition(position); player.timeElapsed.textContent = formatMilliseconds(audio.position); } }); 

Результат

Мы выполнили нашу задачу, но прежде чем мы увидим плеер в действии, мы должны включить библиотеку SoundManager 2. Вы можете сделать это, загрузив библиотеку и все ее файлы с веб-сайта SoundManager 2 или, альтернативно, из CDN .

Помните, что для того, чтобы использовать Flash-проигрыватель в качестве запасного варианта, вы должны включить SWF-файл, который поставляется с библиотекой SoundManager 2. Как только вы это сделали, вы готовы увидеть игрока вживую.

Результат нашего проекта показан ниже в следующем JSFiddle :

Вывод

В этом руководстве я описал SoundManager 2 — библиотеку, которая позволяет использовать уникальный набор API-интерфейсов для работы с браузерами, которые поддерживают элемент audio и его API, и теми, которые этого не делают. Как вы уже видели, SoundManager 2 поддерживает невероятное количество браузеров (включая Internet Explorer 5!), Поэтому вы можете надежно использовать его в своих проектах.

Мы внедрили некоторые методы SoundManager 2, создав простой проигрыватель, который может выполнять основные задачи, такие как воспроизведение и приостановка воспроизведения аудиофайла, изменение громкости и перемещение звука вперед и назад. Если вы хотите узнать больше о SoundManager 2 , я предлагаю вам прочитать его обширную документацию . Надеюсь, вам понравилась библиотека и демоверсия, и вы поделитесь с нами своим мнением.