Як вставити аудіо в HTML-документ?
Вітаю, Друзі! У цьому відео ми продовжимо розмову про вставці об'єктів в HTML-документ.
У минулому відео ми дізналися, як вставити відео в HTML-документ ? Познайомилися з двома HTML-тегами <Object> і <param>, і деякими їх атрибутами . Також хотілося б відзначити, що ми розглянули кілька способів вставки відео в HTML, включаючи використання сервісу YouTube. Що стосується YouTube, то з минулого відео ми можемо пам'ятати, що даний сервіс надає не зовсім валідний HTML-код відео. Тобто він не зовсім підходить для обраного нами DOCTYPE . Але ми природно виправили трохи код, використовуючи <object> і <param>, і зробили його дійсним.
Тепер прийшов час розібрати ще одне питання, з яким ми можемо рано чи пізно зіткнутися, це як вставити аудіо в HTML-документ? У цьому відео уроці ми розглянемо вставку аудіо з нашого сервера з використанням аудіо плеєра. Аудіо плеєр, який ми будемо використовувати, можна знайти в додаткових матеріалах для відеокурси . Також в цьому відео ми знову згадаємо, як підключати скрипти , Так як скрипти грають далеко не останню роль у вставці аудіо в HTML.
Для вставки аудіо в HTML спочатку нам необхідно підключити скрипт, який ми зможемо знайти в додаткових матеріалах. Для цього, до закриває тега <head> ми пропишемо наступний код:
<Script type = "text / javascript" src = "папка з скриптом / audio-player.js"> </ script>
Зверніть увагу, що в шляху необхідно вказати папку, в якій знаходиться скрипт і назва самого скрипта. Якщо Ви відчуваєте труднощі з визначенням шляху до файлу, раджу подивитися відео урок про абсолютних і відносних посиланнях .
Після того, як скрипт підключений, ми повинні дописати ще один скрипт, щоб підключити саму оболонку плеєра і вказати параметри плеєра:
<Script type = "text / javascript"> AudioPlayer.setup ( "папка з файлом / player.swf", {width: 290, initialvolume: 100, transparentpagebg: "yes", left: "000000", lefticon: "FFFFFF" }); </ Script>
Цей скрипт також необхідно прописати до закриває тега <head> . Варто відзначити, що тут ми вказали ширину, гучність, які будуть автоматично встановлені при відтворенні і інші параметри, які ми можемо змінювати на свій розсуд.
Після того, як скрипти підключені, нам залишилося додати музичну композицію на сторінку, щоб вона була доступна для прослуховування. Для цього ми скористаємося тегами абзацу , Всередині яких ми можемо залишити інформацію, яка буде відображена, якщо плеєр не з'явиться. Підключимо ще один скрипт із зазначенням ID плеєра і шляхом до файлу з музикою. Виглядати це буде приблизно так:
<P id = "audioplayer_2"> Музика </ p> <script type = "text / javascript"> AudioPlayer.embed ( "audioplayer_2", {soundFile: "шлях до папки з муз. Файлом / назва файла.mp3"}) ; </ Script>
Тут також варто звернути увагу на ID, який використаний для відображення плеєра. Слід врахувати, що якщо ми хочемо додати більше однієї композиції на сторінку нам необхідно прописувати новий ID для кожного файлу. Наприклад, щоб додати ще один файл ми трохи змінимо ID, приблизно так:
<P id = "audioplayer_2"> Музика </ p> <script type = "text / javascript"> AudioPlayer.embed ( "audioplayer_2", {soundFile: "шлях до папки з муз. Файлом / назва файла.mp3"}) ; </ Script>
І так далі. Досить просто міняти порядковий номер і все.
Ну, ось в принципі і все. Тепер ми знаємо, як додати аудіо в HTML-документ. Звичайно, існують і інші способи. Але я вважаю в нашому випадку цього варіанту цілком достатньо.
Так, до речі, інформацію про плеєр можна знайти тут - http://wpaudioplayer.com/standalone/
HTML-довідник і інші матеріали можна і потрібно завантажити тут !
У наступному відео детально поговоримо про застарілих тегах в HTML 4.01 .