До недавнего времени встроить звук в веб- страницу было не таким уж и лёгким заданием. В общем, существует несколько способов интеграции, среди которых некоторые предлагают более грамотную и лучшую реализацию, но большинство способов ограничивают вас тем, что вам нужно иметь определенный браузер и определённые плагины. С приходом на рынок технологии Flash, эта задача значительно упростилась, так как Flash- плагин позволяет вам встраивать любую анимацию или звук в страницу, и технология поддерживается большинством браузеров. Но востребованность Flash постепенно сходит на нет после выхода на рынок инновационных девайсов от компании Apple: i.
Phone и i. Pad. Как известно, компания Apple принципиально не оснащает свои устройства поддержкой Flash, а число пользователей продукции стремительно растёт. Вкратце, здесь небольшая путаница. К счастью, HTML5 значительно упростил жизнь разработчикам, так как в технологии присутствует элемент audio. Данный элемент позволяет вам встраивать аудио- файлы в любую веб- страницу, а также реализовать панель управления посредством javascript.
Что более важно, технология не требует дополнительных плагинов, и поддерживается почти во всех браузерах, за исключением ранних версий (о поддержке браузерами мы поговорим позже!). В нашей сегодняшней статье мы расскажем вам о том, каким образом можно встроить звуки посредством элемента audio.
Мы также научимся управлять процессом воспроизведения посредством javascript, а также постараемся рассказать вам о поддержке технологии среди браузеров. HTML5- элемент Audio. Данный элемент крайне просто использовать. В нашем сегодняшнем примере мы будем встраивать песенку Бинга Кросби (Bing Crosby) «White Christmas»: < audio src="White.
Christmas. mp. 3"> < /audio> Здесь не нужно особо много объяснять. Примерно как вы вставляете изображение посредством тэга img, таким же образом вы можете вставить звук посредством тэга audio. Кросс- браузерная поддержка. Вышеприведенный пример вряд ли будет работать во всех браузерах. Здесь дело затрагивает формат файла.
Некоторые браузеры умеют воспроизводить файлы формата . Большинство браузеров умеют воспроизводить файлы формата . Вот вам таблица браузеров, где указаны поддержки звуковых форматов: Какие форматы поддерживает ваш браузер? Определите это посредством этой страницы. Как видно в таблице, наиболее оптимальным вариантом реализации будет подключение обоих форматов файлов. Для того чтобы сделать это, вы можете добавить несколько элементов source элементу audio, и в них указать пути к различным форматам. Браузер будет воспроизводить первый файл, который он поддерживает.
Вот пример: < audio> < source src="White. Christmas. mp. 3"> < source src="White. Christmas. ogg"> < /audio> Конечно же, это означает, что вам нужно создать как Mp. OGG версию вашего звукового файла (здесь вам на помощь приходит Audacity), но только так можно организовать кросс- браузерную поддержку.
Ранние версии Internet Explorer (версии 7 и 8) вообще не поддерживают элемент audio. Тем не менее, далее в статье мы рассмотрим, как обойти этот недуг. Автоматическое воспроизведение звука. Хотя вышеприведенный код и встраивает звук, он не воспроизводит его. Если нам надо, чтобы звук воспроизводился автоматически при загрузке страницы, нам нужно добавить элементу атрибут autoplay: < audio autoplay> < source src="White. Christmas. mp. 3"> < source src="White.
Christmas. ogg"> < /audio> Посмотреть демо. Добавляем кнопки управления. Хотя и автоматическое воспроизведение может быть полезным, во многих случаях оно надоедает или совсем неуместно. Поэтому мы можем установить дополнительные кнопки управления элементов audio, чтобы пользователь сам мог решать: < audio controls> < source src="White.
Christmas. mp. 3"> < source src="White. Christmas. ogg"> < /audio> Посмотреть демо. Это добавляет горизонтальную панель с кнопкой паузы/воспроизведения, временной шкалой с ползунком, а также регулятор громкости. Всё примерно так же, как вы можете видеть на плеере в Youtube. Важно помнить, что панель управления будет отличаться в зависимости от браузеров.
Например, в браузере на i. Phone будет отсутствовать ползунок громкости, так как у устройства есть отдельные кнопки для управления уровнем звука. Зацикленное воспроизведение.
Добавление к элементу audio атрибута loop сделает так, что звук будет воспроизводиться бесконечно.< audio loop> < source src="White. Christmas. mp. 3"> < source src="White.
Christmas. ogg"> < /audio> Это может быть полезным для того, чтобы включать фоновую музыку, либо звуковые эффекты в играх. Предварительная загрузка. Вы также можете использовать атрибут preload, который даст браузеру данные о том, когда и где должен быть подгружен определенный звуковой файл. Предварительная загрузка звукового файла означает, что звук может быть воспроизведен сразу же при нажатии пользователем кнопки play. Для этого атрибута есть несколько значений: «none» – браузер не должен навязывать загруженный файл. Т. е. если вы уверены в том, что большинство пользователей не будут воспроизводить этот файл, используйте этот параметр. Либо используйте его в случае, когда вам нужно сохранить как можно больше пропускной способности сервера.
Хорошая статья по вставке flash в HTML. Решение с использованием javascript библиотеки SWFObject 2. update 16.03.2010 Александр Головко. Уроки CSS..
Уроки адоб флеш. Автор уроков Валерий Медведев Уроки Flash CS6 В этом разделе сайта опубликованы уроки Flash CS6. Их можно было бы назвать «Курс Flash для чайников», поскольку они объединены в определенную систему. Информационный Канал Subscribe.Ru Уроки по Flash. Рассылки сайта progs.biz Выпуск No 3 Начало > Flash > Основы > Урок 3 П. Лапин. Win API C/C++ Delphi Java HTML, PHP, mySQL, WEB-дизайн Flash MX C++ Builder Ассемблер SQL Server DirectX Обзор книг Обзор программ. . Видео урок №49 из цикла ВидеоКурса по #HTML. В этом видео уроке. Вставка видео в HTML с использованием Flash-плеера. Данный . Главная > Открытые уроки > Веб-разработка > Вредные советы. Обзор инструментов тестирования кроссбраузерности вёрстки Оформление элементов при помощи utf-символов, спрайтов и псевдо-элементов Типы адресации в html.
Например: < audio preload="metadata"> < source src="White. Christmas. mp. 3"> < source src="White. Christmas. ogg"> < /audio> Имейте в виду, что предварительная загрузка – это лишь удобное дополнение, так как некоторые браузеры могут просто проигнорировать эту команду и начать творить всё, что им вздумается. Управление воспроизведением посредством javascript. Что удобно в элементах javascript – это то, что ими проще простого управлять посредством javascript. Аудио- элемент предлагает множество удобных параметров и способов управления: Play() – начать воспроизведение с текущей позиции; Pause() – остановить воспроизведение на текущей позиции; can.
Честно говоря, я такой проблемы как подключение Flash в HTML никогда не имел. Наверное потому, что пользуюсь DreamWeaver. Уроки html (64). Уроки JavaScript (66). Флеш-технологии (54). Хостинг (14).. To view this page ensure that Adobe Flash Player version 9.0.0 or greater is installed. Продвинутые уроки по HTML и CSS Приложения и сайты могут проигрывать аудио и видео без установки дополнительных плагинов вроде Flash -а.
Play. Type(type) – определить, поддерживает ли браузер воспроизведение данного типа медиа; duration – продолжительность дорожки в секундах; current. Time – текущее положение в секундах.
Вы также можете установить данный параметр на перемещение положения воспроизведения. Используя предложенные выше параметры и методы, мы можем создать некоторые основные кнопки управления: < audio id="my. Tune"> < source src="White. Christmas. mp. 3"> < source src="White. Christmas. ogg"> < /audio> < button onclick="document. Element. By. Id('my.
Tune'). play()"> Play Music< /button> < button onclick="document. Element. By. Id('my. Tune'). pause()"> Pause Music< /button> < button onclick="document. Element. By. Id('my. Tune'). pause(); document.
Element. By. Id('my. Tune'). current. Time = 0; "> Stop Music< /button> Посмотреть демо: http: //www. File/articles/authoring/html/html. Поддержка ранних версий Internet Explorer.
В большинстве случаев браузер пользователя будет поддерживать элемент HTML5. Но, к сожалению, браузеры IE версий 7 и даже 8 не поддерживают этот элемент (хотя в 9- м уже есть поддержка). Важно продумать версию отката для пользователей, которые остались в 2. Очень сырой, но эффективный метод заключается в том, чтобы применить специальные комментарии для выделения данных браузеров, и задать им объектный указатель до звукового файла. Таким образом, браузер зачастую будет отображать встроенный контроллер, позволяющий пользователям воспроизводить, останавливать или перематывать музыку в почти похожей на HTML5 audio манере. Вот пример: < div id="content"> < div style="margin- bottom: 2.
Button" onclick="document. Element. By. Id('my. Tune'). play()"> Play Music< /button> < button id="pause. Button" onclick="document.
Element. By. Id('my. Tune'). pause()"> Pause Music< /button> < button id="stop. Button" onclick="document. Element. By. Id('my. Tune'). pause(); document. Element. By. Id('my.
Tune'). current. Time = 0; "> Stop Music< /button> < /div> < audio id="my. Tune" controls> < source src="White. Christmas. mp. 3"> < source src="White. Christmas. ogg"> < /audio> < !- -[if lt IE 9]> < object id="my. Tune. Obj" type="audio/x- mpeg" data="White.
Christmas. mp. 3" autoplay="false" height="4. White. Christmas. Element. By. Id('play. Button'). onclick = function() { document. Element. By. Id('my. Tune. Obj'). play() }; document.
Element. By. Id('pause. Button'). onclick = function() { document. Element. By. Id('my. Tune. Obj'). pause() }; document. Element. By. Id('stop. Button'). onclick = function() { document.
Element. By. Id('my. Tune. Obj'). stop() }; < /script> < ![endif]- -> < /div> Посмотреть демо. Вышеприведенный пример будет работать во всех браузерах, которые поддерживают HTML5 Audio, и также будет работать в браузерах IE версий 7 и 8. С помощью комментариев, мы перенаправляем рычаги управления для кнопок напрямую к звуковому файлу. Другой способ отката заключается во внедрении в страницу Flash- плеера. Вот отличная статья, в которой говорится об откате в виде плеера на Flash. Заключение. В нашей сегодняшней статье мы научились встраивать аудио- файлы посредством HTML5.
Элемент audio не только прост в использовании, но мы также можем оформить его под собственные требования, а также управлять воспроизведением посредством javascript. Хотите узнать больше об элементе audio в HTML5? Тогда ознакомьтесь со спецификациями. Хотя пока что поддержка страдает в некоторых браузерах (типа старых версий IE), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже.