Проигрыватель песен

@Newvovi4 · Регистрация: 30.04.2013

Студворк — интернет-сервис помощи студентам

Добрый день, мне нужна ваша помощь. Я хочу сделать чтобы у меня можно было слушать песни как вконтакте. У меня есть точно такой скрипт проигрывателя и мне нужно его грамотно вписать в код моей страницы. Я попробовал но у меня все переменялось: бэкграунд слетел и блок стал другого цвета.

Код страницы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<title> Lil Wayne</title>
<link rel="stylesheet" type="text/css" href="style.css">
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="Stylesheet" href="drplayer.css" type="text/css" />
 
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
 
    <script src="drplayer.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#playlist").playlist(
                {
                    playerurl: "swf/drplayer.swf"
                }
            );
        });
    </script>
 
 
</head>
 
<body background="1.jpg">
 
   <div class="left">
<p align="center"><font size="50" face="fantasy">Lil Wayne</font></p>
 
 
 
 
 
 
 
 <div id="playlist">
        <div href="http://drplayer.local/1.mp3" style="width: 400px;" class="item">
            <div>
                <div class="fr duration">02:06</div>
                <div class="btn play"></div>
                <div class="title"><b>The Ting Tings</b> - Shut up and let me go</div>
            </div>
            <div class="player inactive"></div>
        </div>
        
        <div class="clear"></div>
        <div href="http://drplayer.local/2.mp3?19" style="width: 400px;" class="item">
            <div>
                <div class="fr duration">06:29</div>
                <div class="btn play"></div>
                <div class="title"><b>Metallica</b> - Nothing else matters</div>
            </div>
            <div class="player inactive"></div>
        </div>
        <div class="clear"></div>
        <div href="http://drplayer.local/3.mp3?8" style="width: 400px;" class="item">
            <div>
                <div class="fr duration">05:12</div>
                <div class="btn play"></div>
                <div class="title"><b>Korn</b> - Somebody someone</div>
            </div>
            <div class="player inactive"></div>
        </div>
        <div class="clear"></div>
        <div href="http://drplayer.local/4.mp3?44" style="width: 400px;" class="item">
            <div>
                <div class="fr duration">03:52</div>
                <div class="btn play"></div>
                <div class="title"><b>A Static Lullaby</b> - Toxic</div>
            </div>
            <div class="player inactive"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    
    <a href="javascript:void(0);" onClick="$('#playlist').playlist('prev');">Prev</a>
    <a href="javascript:void(0);" onClick="$('#playlist').playlist('next');">Next</a>
    
    <a href="javascript:void(0);" onClick="$('#playlist').playlist('pause');">Pause</a>
    <a href="javascript:void(0);" onClick="$('#playlist').playlist('play');">Play</a>
    
 
 
 
 
 
 
 
  <div>
 
<div class="bot">
</div>
 
</body>
</html>

css код страницы:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body{
    backgroundcolor: black;
    }
 
 
div.left {
    background-color: rgba(255, 0, 255, 0.1);
    width: 80%;
    min-height: 780px;
    max-height: 100%;
    float: left;
    margin-left: 70px;
    border-radius: 20px;
    padding-top: 10px;
    margin-bottom: 20px;
    margin: 15px 0 0 165px;
    }
 
 
 
div.bot {
    background-color: #8B4513;
    width: 100%;
    height: 60px;
    clear: both;
    background-color: rgba(255, 255, 255, 0);
    }

css код самого плеера

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.fl 
{
float:left;
}
 
.fr 
{
float: right;
}
.clear { clear: both; line-height: 0px !important; font-size: 0px !important; height: 0 !important }
 
body {
    background: #FFFFFF;
    font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
    font-size: 11px;
    margin: 10px;
}
 
 
a 
{
   color:   #555555; 
   font-weight: bold;
}
 
b 
{
   color:   #555555; 
   font-weight: bold;
}
 
.duration 
{
    font-size:10px;
    color:#777;
}
 
.btn.play 
{
    width:16px;
    height:17px;
    background-image: url(i/play.gif);
    display: inline-block;
}
 
.btn.pause
{
    width:16px;
    height:17px;
    background-image: url(i/pause.gif?2);
}
 
.btn.paused
{
    width:16px;
    height:17px;
    background-image: url(i/play.gif?3);
    display: inline-block;
}
 
 
div.player 
{
    width:380px;
    height:14px;
    margin-top:5px;
    padding-left:20px;
}
 
div.player.inactive
{
    margin-top:5px;
    margin-bottom:0px;
    border-top: dashed 1px #555555;
}
 
.item .title 
{
    -vertical-align:middle;
}
 
.item .btn 
{
    display:inline;
    float:left; 
    margin-right:5px;
    cursor:pointer;
}

если нужен сам скрипт то вот сслыка

@dolte · 14.05.2013, 23:50

Знать бы как всё должно выглядеть...

вот код css drplayer

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.fl 
{
float:left;
}
 
.fr 
{
float: right;
}
.clear { clear: both; line-height: 0px !important; font-size: 0px !important; height: 0 !important }
 
a 
{
   color:   #555555; 
   font-weight: bold;
}
 
b 
{
   color:   #555555; 
   font-weight: bold;
}
 
.duration 
{
    font-size:10px;
    color:#777;
}
 
.btn.play 
{
    width:16px;
    height:17px;
    background-image: url(i/play.gif);
    display: inline-block;
}
 
.btn.pause
{
    width:16px;
    height:17px;
    background-image: url(i/pause.gif?2);
}
 
.btn.paused
{
    width:16px;
    height:17px;
    background-image: url(i/play.gif?3);
    display: inline-block;
}
 
 
div.player 
{
    width:380px;
    height:14px;
    margin-top:5px;
    padding-left:20px;
}
 
div.player.inactive
{
    margin-top:5px;
    margin-bottom:0px;
    border-top: dashed 1px #555555;
}
 
.item .title 
{
    -vertical-align:middle;
}
 
.item .btn 
{
    display:inline;
    float:left; 
    margin-right:5px;
    cursor:pointer;
}

@Newvovi4 · 14.05.2013, 23:54 **[ТС]**

Я хочу чтобы у меня при переходе в каждый альбом переходило на другую страницу а там в блоке были песни этого альбома друг по другом как вконтакте

@dolte · 15.05.2013, 00:19

я имею ввиду страницу с аудио, не понятно что куда уехало.

@Newvovi4 · 15.05.2013, 01:07 **[ТС]**

Я немного разобрался но остались недоработки. Вот посмотрите . Когда нажимаешь на play там строка по которой бежит ползунок сливается со строкой регулировки звука. И еще я хочу чтобы ползунки и там и там были черного цвета.

@Newvovi4 · 19.05.2013, 21:03 **[ТС]**

Помогите пожалуйста очень срочно надо.

Добавлено через 21 час 0 минут
dolte, Братанчик нужна твоя помощь!

Новые блоги и статьи Все статьи Все блоги /
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .

@Newvovi4 0 / 0 / 1 Регистрация: 30.04.2013 Сообщений: 53
	14.05.2013, 23:54 [ТС]
	Я хочу чтобы у меня при переходе в каждый альбом переходило на другую страницу а там в блоке были песни этого альбома друг по другом как вконтакте 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	15.05.2013, 00:19
	я имею ввиду страницу с аудио, не понятно что куда уехало. 1

@Newvovi4 0 / 0 / 1 Регистрация: 30.04.2013 Сообщений: 53
	15.05.2013, 01:07 [ТС]
	Я немного разобрался но остались недоработки. Вот посмотрите . Когда нажимаешь на play там строка по которой бежит ползунок сливается со строкой регулировки звука. И еще я хочу чтобы ползунки и там и там были черного цвета. 0

@Newvovi4 0 / 0 / 1 Регистрация: 30.04.2013 Сообщений: 53
	19.05.2013, 21:03 [ТС]
	Помогите пожалуйста очень срочно надо. Добавлено через 21 час 0 минут dolte, Братанчик нужна твоя помощь! 0

Опции темы