A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Плеер для сайта – в этой статье мы рассмотрим пример добавления на страницы сайта плеера с плейлистом, в котором есть возможность использовать текст, написанный кириллицей.

В предыдущей статье, мы с вами рассмотрели пример использования mp3 плеера на странице сайта с плейлистом, причём в качестве примера, мы  взяли плеер с простым html кодом.

Так как  я поставил перед собой задачу показать как можно более простой код для плеера, то содержимое плейлиста у нас бралось прямо из html кода, а это означает, что в названиях треков нельзя было использовать кириллический текст.

В этой статье давайте рассмотрим - плеер для сайта, плейлист которого написан кириллическим текстом.

Итак, давайте начнём. Создадим на диске папку, например, с именем playlist. Добавим в эту папку следующие файлы:

index.html, playlist.mpl, mju.swf, index.js

это рабочие файлы плеера, и сюда же, давайте добавим папку с mp3 файлами, которые мы планируем воспроизводить на сайте:

mp3\Elton_John_believe.mp3

      \Mylene_Farmer_my_control.mp3

      \Leps_not_love.mp3

Все файлы, вы можете скачать себе по ссылке: Скачать плеер с плейлистом на кирилице

В результате, мы с Вами получим вот такую конфигурацию файлов и папок:

Плеер для сайта, плейлист кириллицей

Назначение папок и файлов здесь следующие:

Как я уже указывал выше, в папке mp3 находятся аудио файлы для воспроизведения их на сайте, а вот назначение других файлов:

                                                             index.html    -  файл с html кодом плеера с плейлистом

                                                             playlist.mpl   -  плейлист редактируется блокнотом

                                                             mju.swf        -  Flash плеер

                                                             index.js        -  файл javascript

 

Ну а теперь я приведу  html код файла index.html, вот он:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Как самому создать сайт - аудио на сайте</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="title" content="плейлист кириллицей">

<script language="javascript" type="text/javascript" src="index.js">

</script>

</head>

<body>
<style type="text/css">

.mju{width:150px;text-align:center;color:#444;font:bold 10px Arial;}

.mju a{color:#444;font:bold 10px Arial;text-decoration:underline;}

.mju a:hover{text-decoration:none;} 

a{color:#444;font: 11px Arial; line-height: 170%; text-decoration:none;}

p.centr {text-align: center;}   

</style>

<div class="mju">

<object width="150" height="100" id="mju">

<param name="allowScriptAccess" value="sameDomain" />

<param name="swLiveConnect" value="true" />

<param name="movie" value="mju.swf" />

<param name="flashvars" value="playlist=playlist.mpl&auto_run=false&repeat=false&shuffle=false" />

<param name="loop" value="false" />

<param name="menu" value="false" />

<param name="quality" value="high" />

<param name="wmode" value="transparent" />

<embed src="mju.swf" flashvars="playlist=playlist.mpl&auto_run=false&repeat=false&shuffle=false" loop="false" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="150" height="100" name="mju" allowScriptAccess="sameDomain" swLiveConnect="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

</div>

<table cellspacing="0" cellpadding="4" border="0" style="border:1px solid #CCC">

<tr valign="top" align="left">

<td>

<p class="centr">

<b><u><i>Плейлист</i></u></b></p>

<a href="/" onclick="mju_play_track(1);return false;">1. "Элтон Джон - Beleve</a><br>

<a href="/" onclick="mju_play_track(2);return false;">2. Милен Фармен Control</a><br>

<a href="/" onclick="mju_play_track(3);return false;">3. Г. Лепс - Не люблю &nbsp;&nbsp;</a><br>

</td>

<td>&nbsp;</td></tr><tr valign="top" align="center">

<td colspan="2">&nbsp;</td>

</tr>

</table>

</body>

</html>

Результатом работы кода, будет появление на странице вот такого плеера с плейлистом:

Плеер с плейлистом на русском

Если Вы разместите данный код на своей сайте, то получите плеер с плейлистом, в котором описание треков можно делать на русском языке. Для добавления новых аудио треков, Вам достаточно будет закачать на сайт аудио файлы формата mp3 и отредактировать html файл, в нашем случае - index.html.

Автр: Виктор Милованов

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации