Развитие технологий и браузеров позволило, применяя HTML5, легко встраивать в страницу вашего сайта аудио и видео контент. Технология Sounding Web Content (SWC) — озвученный веб контент —
была применена на сайте Леонида Гайдая в апреле 2010 г. Но тогда решение пришло через связку Javascript-Flash.
Теперь стало еще проще вставить на свой сайт какую-нибудь крылатую фразу из комедии Леонида Гайдая или музыкальный фрагмент:
♪ Гениально! ♪
HTML код внедрение SWC на ваш сайт
А вот и html код (всего лишь несколько строк!), который можно вставить в любом месте вашей страницы между тегами <body> и </body>:
<audio hidden src="" id="audio_support" style="width:20%" controls>Canvas not supported</audio>
<span style="background: url(http://alexpetrov.ru/img/stave.png); " title="Гениально!" onMouseOver='this.style.background='#b1edb1'; var audiop = document.getElementById("audio_support");
audiop.src ="http://leonid-gaidai.ru/phrases/br_genialno.mp3"; audiop.play(); return false'
onMouseOut='this.style.background='url(http://alexpetrov.ru/img/stave.png)';
var audiop = document.getElementById("audio_support"); audiop.pause(); return false'><sub>♪</sub>Это ведь здорово? (подведите мышку к этой фразе)<sup>♪</sup></span>
Если вы в тексте страницы хотите использовать несколько фраз, как, например, в аннотации к комедии «Бриллиантовая рука», то первую строку повторять не нужно.
Тег <audio …>Тег audio не поддерживается вашим браузером!</audio> применяйте один раз!
Если вы хотите показывать пользователю плеер с возможностью управления звуком, то удалите hidden после
тега <audio hidden...>.
Предупреждение пользователей о звуке!
Конечно, желательно посетителю вашей страницы сообщить заранее о том, что включен звук, иначе могут возникнуть неприятные казусы, например, когда он находится на работе. :)
Как это сделано, к примеру, на этой странице. Cookie!
Если вы хотите показывать плеер, то он будет выглядеть так:
для Firefox:
для Chrome:
для Opera:
для IE:
Чтобы как-то выделить swc-блоки предлагается: в начале поставить символ ♪ (♪) и в конце ♫ (amp;#9835;). Можно фоном подключить
бэкграунд-картинку нотного стана:
При активации (onMouseOver) блока текста или ссылки меняется цвет фона этого блока.
Текст можно сделать с подчеркиванием style="border-bottom: 1px dashed rgb(119, 119, 119);", вот так: ♪ Все просто! ♪
Все основные браузеры — Internet Explorer 9+, Firefox, Opera, Chrome, Safari —
поддерживают тег <audio>, но, как всегда, есть нюансы.
Разные браузеры поддерживают разные аудио форматы, т.е. не все из трех возможных на данный момент (MP3, Wav, Ogg):
Браузер
MP3
Wav
Ogg
Internet Explorer
ДА
НЕТ
НЕТ
Chrome
ДА
ДА
ДА
Firefox
ДА
ДА
ДА
Safari
ДА
ДА
НЕТ
Opera
ДА
ДА
ДА
Области применение технологии озвученного контента
Самое подходящее место использования - сайты о кино, об артистахв, которых мы узнаем по голосу, а также режиссеров, исполнителей на эстраде, радио и телевидении.
Что еще - подскажет ваша фантазия. В текст страницы можно внедрять SWC-блоки для разнообразия и концентрации внимания посетителей сайта, делать оригинальные примечания или отступления.
Или, к примеру, создать оригинальную 404 страницу.
Для продвинутых!
У тега audio есть свойства, которыми можно управлять посредством javascript.
В примере ниже показано, как можно регулировать уровень звука:
1.0
♪ Проверить уровень звука ♪
Как технология SWC работала раньше
Был создан скрытый (однопиксельный) Flash-плеер, и с помощью javascript ему передавалась ссылка на источник звука.
Код был довольно громоздким, отдельно в head нужно было вставить два скрипта:
