Материалы по программированию
« Содержание »
JS шаблон для вставки audio на страницу

Статья продолжает тему Как вставить аудио на сайт  на основе WordPress Audio Player и описывает второй вариант реализации предложенного решения, при котором весь HTML код для проигрывания звука .mp3 генерируется с помощью JS.

Предложенный вариант, несмотря на то что достаточно универсален, все же является частным случаем использования конкретного аудио плеера на web странице. Для использования же встроенных в HTML5 возможностей audio и видео см. пост: Реализация video и audio в HTML5, шаблоны, schema.org микроразметка .

 

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Для применения описанного здесь этого варианта необходимо подключить в секцию <head> web страницы файл JS из набора WordPress Audio Player (см. основную статью темы ).

Для этого добавьте туда код:

Код для подключения js файла в секцию <head>:

<script type="text/javascript" src="path/to/audio-player.js"></script>

После того как основной скрипт подключен, нужно инициализировать сам плеер при загрузке страницы. Для этого добавьте этот код в хедер страницы или в ваш js файл с остальными скриптами.

<script type="text/javascript">  
            AudioPlayer.setup("/audio/player.swf", {  
                width: 290  
            });  
</script>

Теперь мы готовы, что бы сформировать HTML код.
В нужном месте статьи или страницы нужно будет добавить ява скрипт, который уже непосредственно будет строить код конкретного экземпляра плеера.
Внутри этого блока вы можете передать в player.swf любые из параметров которые описаны в документации (см. на сайте разработчиков).

<p id="audioplayer_1">Alternative content</p>  
<script type="text/javascript">  
        AudioPlayer.embed("audioplayer_1", {soundFile: "http://site.ru/your_path.mp3"});  
</script>

или

<p id="audioplayer_2">Alternative content</p>
<script type="text/javascript">         
    AudioPlayer.embed("audioplayer_2", {  
        soundFile: "http://site.ru/your_path.mp3",  
        titles: "Title",  
        artists: "Artist name" 
    });  
</script>

Вы можете встроить в страницу несколько записей, для этого задайте для каждой уникальное ID.

Когда web page загрузиться код исполниться и содержимое предшествующего элемента <p> будет заменено на плеер в виде вот такого блока кода:
(!параметры будут те которые вы передали).

<p class="audioplayer_container">
    <object id="audioplayer_1" width="290" height="24" type="application/x-shockwave-flash" name="audioplayer_1" style="outline: none" data="http://wpaudioplayer.com/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.6">
        <param name="bgcolor" value="#FFFFFF">
        <param name="wmode" value="transparent">
        <param name="menu" value="false">
        <param name="flashvars" value="animation=yes&encode=yes&initialvolume=60&remaining=no&noinfo=no&buffer=5&checkpolicy=no&rtl=no&bg=E5E5E5&text=333333&leftbg=CCCCCC&lefticon=333333&volslider=666666&voltrack=FFFFFF&rightbg=B4B4B4&rightbghover=999999&righticon=333333&righticonhover=FFFFFF&track=FFFFFF&loader=009900&border=CCCCCC&tracker=DDDDDD&skip=666666&soundFile=http://site.ru/your_path.mp3&playerID=audioplayer_1">
    </object>
</p>

Если вы читали первый вариант реализации добавления audio, то вы обратите внимание, что внутри тега <object> отсутствует тег <audio> для использовании HTML5 технологии как запасной вариант. Т.е. скрипт сформирует нам только flash плеер в теге <object>. Если же вам этого недостаточно и вы хотите все же сделать все три уровня, описанные в главной статье, то вам тогда нужно будет переписать js функцию создающую HTML или вернуться к первому варианту без ява скрипта.