Веб-студия Александра ПЕТРОВА

Визуальная реализация ваших фантазий!
Главная
 к началу
Работа
 оценить
Услуги
 заказать
Архив
 скачать
Музыка
 послушать
Информация
 узнать
Контакты и общение
 пообщаться
  Главная:  Обновления |  Новости
Вернуться к разделу «Обновления»
    Технология озвученного веб контента SWC 2.0

SWC 2.0 — озвученный веб контент

Развитие технологий и браузеров позволило, применяя 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>&#9834;</sub>Это ведь здорово? (подведите мышку к этой фразе)<sup>&#9834;</sup></span>

Если вы в тексте страницы хотите использовать несколько фраз, как, например, в аннотации к комедии «Бриллиантовая рука», то первую строку повторять не нужно. Тег <audio …>Тег audio не поддерживается вашим браузером!</audio> применяйте один раз!

Если вы хотите показывать пользователю плеер с возможностью управления звуком, то удалите hidden после тега <audio hidden...>.

Предупреждение пользователей о звуке!

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

Как это сделано, к примеру, на этой странице. Cookie!

Готовые mp3 фрагменты

Все крылатые фразы из комедий Леонида Гайдая «Операция «Ы» и другие приключения Шурика», «Кавказская пленница, или новые приключения Шурика»,«Бриллиантовая рука», «Иван Васильевич меняет профессию» и «Не может быть!» вы можете найти и получить для своего сайта готовый озвученный текст в виде html кода в соответствующем разделе.

Визуальное оформление SWC контента

Если вы хотите показывать плеер, то он будет выглядеть так:

для Firefox:
для Chrome:
для Opera:
для IE:

Чтобы как-то выделить swc-блоки предлагается: в начале поставить символ ♪ (&#9834;) и в конце ♫ (amp;#9835;). Можно фоном подключить бэкграунд-картинку нотного стана:

При активации (onMouseOver) блока текста или ссылки меняется цвет фона этого блока. Текст можно сделать с подчеркиванием style="border-bottom: 1px dashed rgb(119, 119, 119);", вот так:  Все просто! 

Примеры

«Говорящий текст» (строка или блок текста):

 Да, нет, я не трус. Но я боюсь! 

«Говорящая» ссылка:

 А под дичь водку не пьют! 

«Говорящая» картинка:

Минуточку! За чей счет этот банкет?

Кроссбраузерность SWC кода

Все основные браузеры — 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 нужно было вставить два скрипта:

<script type="text/javascript" src="http://alexpetrov.ru/swc/swfobject.js"></script>
<script type="text/javascript" src="http://alexpetrov.ru/swc/swc.js" ></script>

И кроме этого — сам блок (к примеру, span или div) с текстом и скриптом внутри него:

<sub>&#9834;</sub><span title="За чей счет этот банкет? Кто оплачивать будет?" style="text-decoration: none; border-bottom: 1px dashed rgb(119, 119, 119); background: none repeat scroll 0% 0% transparent;" onmouseover="this.style.background='#77ff77';ap_play('phrases/ivan_zaCheySchetEtotBanket.mp3'); return false;" onmouseout="this.style.background='transparent'; ap_play(''); return false;">&nbsp;<b> За чей счет этот банкет? Кто оплачивать будет?</b>&nbsp;</span><sup>&#9835;</sup>.

SWC 2.0: заключение

Теперь не нужен Flash плеер, не нужно подключать отдельные файлы javascript.

Все стало намного проще с использованием тега audio!

Вставляем сам плеер: <audio hidden src="" id="audio_support" style="width:20%" controls>Canvas not supported</audio>

И код обработчик событий onMouseOver и onMouseOut внутри нужного вам тега:

onMouseOver='var audiop = document.getElementById("audio_support"); audiop.src ="http://leonid-gaidai.ru/phrases/br_genialno.mp3"; audiop.play(); return false' onMouseOut='var audiop = document.getElementById("audio_support"); audiop.pause(); return false'

Еще раз готовый html код для вставки озвученного текста на ваш сайт:

Внедрить готовые крылатые фразы на свой сайт

можно, взяв их с сайта Леонида Гайдая и получив готовый html-код для каждой выбранной фразы из любой любимой комедии.

Контакты

Свои вопросы или предложения направляйте разработчику технологии озвученного контента swc 2.0

 

Мнения посетителей по данной теме


А Ваше мнение, впечатление от прочитанного/увиденного/услышанного?


 Имя:   E-mail:   ( спрятать)
Текст:
 
Высказать мнение



Способы связи по вопросам разработки сайта и графического дизайна:

    E-mail:     

    Skype: petrov001
  



 
 Copyright © 2008-2017  AlexPetrov.ru



1 2