Статья продолжает тему Как вставить аудио на сайт на основе WordPress Audio Player и описывает второй вариант реализации предложенного решения, при котором весь HTML код для проигрывания звука .mp3 генерируется с помощью JS.
Предложенный вариант, несмотря на то что достаточно универсален, все же является частным случаем использования конкретного аудио плеера на web странице. Для использования же встроенных в HTML5 возможностей audio и видео см. пост: Реализация video и audio в HTML5, шаблоны, schema.org микроразметка .
Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.
Для применения описанного здесь этого варианта необходимо подключить в секцию основную статью темы ).
web страницы файл JS из набора WordPress Audio Player (см.Для этого добавьте туда код:
Код для подключения js файла в секцию
:<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, то вы обратите внимание, что внутри тега
отсутствует тег для использовании HTML5 технологии как запасной вариант. Т.е. скрипт сформирует нам только flash плеер в теге . Если же вам этого недостаточно и вы хотите все же сделать все три уровня, описанные в главной статье, то вам тогда нужно будет переписать js функцию создающую HTML или вернуться к первому варианту без ява скрипта.