Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
 Аватар для SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532

Аудиоплеер на HTML5 и JS для сайта. Не работает в Опере и Андроид

30.12.2013, 17:14. Показов 2624. Ответов 10
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Доброго времени суток.
Вот закончил писать плеер для сайта. Исходник прилагаю ниже. Но проблема такая, не работает в Опере и в системе Андроид, а это не есть хорошо. Подскажите пожалуйста как это исправить.

Буду благодарен если подскажете как сделать счетчик вычисления сколько процентов песни пользователь прослушал.

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

<!DOCTYPE html>
<html>
<head>
    <title>Player</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style type="text/css">
     .rngVol
     {
         display: none;
     }
        .audioBloks
        {
            border: 1px ridge red;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    function setCookie(name, value, options) {
        options = options || {};
 
        var expires = options.expires;
 
        if (typeof expires == "number" && expires) {
            var d = new Date();
            d.setTime(d.getTime() + expires*1000);
            expires = options.expires = d;
        }
        if (expires && expires.toUTCString) {
            options.expires = expires.toUTCString();
        }
 
        value = encodeURIComponent(value);
 
        var updatedCookie = name + "=" + value;
 
        for(var propName in options) {
            updatedCookie += "; " + propName;
            var propValue = options[propName];
            if (propValue !== true) {
                updatedCookie += "=" + propValue;
            }
        }
 
        document.cookie = updatedCookie;
    }
    function getCookie(name) {
        var matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
    function timeplay ()
    {
        rangeplay.value = audio.currentTime;
    }
    var startplay;
    var audio;
    var rangeplay;
    var chip;
    var audioid;
    var bplayid;
    var rangeid;
    var volume;
    var idButton;
    $(document).ready(function(){
        chip=1;
    });
    function stopPlay(idButt)
    {
        $('#'+idButt+'').attr('value','play');
        audio.pause();
        clearInterval(startplay);
    }
    function bplayckick(paramA,paramB,idB,idV){
        //alert(chip + paramA + " " + audioid);
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        volume = document.getElementById(idV);
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        //alert(rangeplay.max);
        if(audio.paused)
        {
            audio.play();
            if(getCookie('volume')!=='undefined')
            {
                audio.volume = getCookie('volume');
                volume.value=getCookie('volume')*100;
            }
 
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            audio.pause();
            $('#'+idB+'').attr('value','play');
            clearInterval(startplay);
            chip=1;
        }
 
    }
    function mdown(paramA,paramB,idB){
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
            $('#'+idB+'').attr('value','pause');
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        if(chip==2)
        {
 
            clearInterval(startplay);
            if(audio.paused)
            {
                audio.play();
            }
            else
            {
 
 
 
            }
        }
 
    }
    function mup(idB,paramA){
        audio.currentTime = rangeplay.value;
        if(chip==1)
        {
            audio.play();
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            clearInterval(startplay);
            startplay=setInterval(timeplay,1000/66);
 
        }
    }
    function FunVolume(paramA,idV){
        volume = document.getElementById(idV);
        audio = document.getElementById(paramA);
        audio.volume = volume.value/100;
        setCookie('volume',audio.volume,['2678400','/','/','false']);
    }
    function overblosks(idV)
    {
        if(getCookie('volume')!=='undefined')
        {
            volume = document.getElementById(idV);
            volume.value=getCookie('volume')*100;
        }
 
        $("#"+idV+"").show();
    }
    function outBloks(idV)
    {
        $("#"+idV+"").hide();
    }
    </script>
<div class="audioBloks" onMouseOver="overblosks('rangeVol_1')" onMouseOut="outBloks('rangeVol_1')">
<audio class="audio" id="muz_1">
    <source src="../muz/Slipknot - Before i Forget.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером.
</audio>
    <input class="s_p" onClick="bplayckick('muz_1','range_1','start_pauze_1','rangeVol_1')" type="button" id="start_pauze_1" title="start" value="play">
<input class="rng" type="range" id="range_1" onMouseDown="mdown('muz_1','range_1','start_pauze_1')" onMouseUp="mup('start_pauze_1','muz_1')" value="0" max="100" min="0">
    <input class="rngVol" type="range" id="rangeVol_1" onMouseMove="FunVolume('muz_1','rangeVol_1')" value="80" max="100" min="0">
</div>
<div class="audioBloks" onMouseOver="overblosks('rangeVol_2')" onMouseOut="outBloks('rangeVol_2')">
    <audio class="audio" id="muz_2">
        <source src="../muz/Stromae - Papaoutai.mp3" type="audio/mpeg">
        Тег audio не поддерживается вашим браузером.
    </audio>
    <input class="s_p" onClick="bplayckick('muz_2','range_2','start_pauze_2','rangeVol_2')" type="button" id="start_pauze_2" title="start" value="play">
    <input class="rng" type="range" id="range_2" onMouseDown="mdown('muz_2','range_2','start_pauze_2')" onMouseUp="mup('start_pauze_2','muz_2')" value="0" max="100" min="0">
    <input class="rngVol" type="range" id="rangeVol_2" onMouseMove="FunVolume('muz_2','rangeVol_2')" value="80" max="100" min="0">
</div>
</body>
</html>
Спасибо.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 30.12.2013, 17:14
Ответы с готовыми решениями:

Аудиоплеер на сайте для андроид
Проблема: есть сайт с установленным аудиоплеером. Проигрываются записи mp.3 с плейлиста (нет preload, autoplay). Плагин аудиоплеера хорошо...

Всего одна из страниц сайта плохо работает в IE и Мозилле (абра-кадабра).В Опере все работает.
Привет всем. Сделал небольшой сайтик на HTML и немножко СSS там присутствует. Это мой первый сайт. Состоит из десяти страничек....

html5 audio mp3 в опере и мазилле
Доброго всем времени суток! Пишу html5 аудио плеер. Когда написал просто: &lt;audio src=&quot;song.mp3&quot; controls&gt;&lt;/audio&gt; ...

10
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
30.12.2013, 23:33
Я пока что в спешке не вникал Ваш код, но вот простой пример вычисления и показа процентов прослушанной части :
HTML5
1
2
3

<div id=schyotchik>Тут будет показываться количество процентов</div>
<audio id=audio src = "mysong.ogg"></audio>
<button onclick="a.play();setInterval(timeplay,100)">Играть</button>
JavaScript
1
2
3
4
5
6
7
8

<script>
a=document.getElementById("audio");
b=document.getElementById("schyotchik");
 
function timeplay(){
    b.innerHTML=Math.floor(a.currentTime/a.duration*100)+" %";
}
</script>
А чтобы в Опере работало, попробуйте аудиофайлы конвертировать в формат OGG, и указать тип : type="audio/ogg"
Конвертировать можно здесь : media.io
1
 Аватар для SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532
31.12.2013, 01:11  [ТС]
Цитата Сообщение от Опан Посмотреть сообщение
А чтобы в Опере работало, попробуйте аудиофайлы конвертировать в формат OGG, и указать тип : type="audio/ogg"
Придется кидать тогда и mp формате, и в ogg, что не желательно.

Добавлено через 4 минуты
Цитата Сообщение от Опан Посмотреть сообщение
Я пока что в спешке не вникал Ваш код, но вот простой пример вычисления и показа процентов прослушанной части :
Мне не нужно его выводить. Мне необходимо отправить его на сервер, когда пользователь переключ на другую песню. + надо учитывать только то,что он прослушал, без перемотки

Добавлено через 36 минут
Цитата Сообщение от SanychBY Посмотреть сообщение
Мне не нужно его выводить. Мне необходимо отправить его на сервер, когда пользователь переключ на другую песню. + надо учитывать только то,что он прослушал, без перемотки
Это необходимо для последующего вычисления рейтинга песни.

Добавлено через 54 минуты
А как бы еще показывать на сколько песня загрузилась?
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
01.01.2014, 01:47
Цитата Сообщение от SanychBY Посмотреть сообщение
учитывать только то,что он прослушал, без перемотки
Я внедрил в Ваш код 3 переменные, которые обеспечивают реализацию этой задумки. В переменной taym откладывается общее количество процентов прослушанной части песни. Его и нужно отправлять на сервер. Свои строки от Ваших я отделил пустыми строками:
JavaScript
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

<script type="text/javascript">
    function setCookie(name, value, options) {
        options = options || {};
 
        var expires = options.expires;
 
        if (typeof expires == "number" && expires) {
            var d = new Date();
            d.setTime(d.getTime() + expires*1000);
            expires = options.expires = d;
        }
        if (expires && expires.toUTCString) {
            options.expires = expires.toUTCString();
        }
 
        value = encodeURIComponent(value);
 
        var updatedCookie = name + "=" + value;
 
        for(var propName in options) {
            updatedCookie += "; " + propName;
            var propValue = options[propName];
            if (propValue !== true) {
                updatedCookie += "=" + propValue;
            }
        }
 
        document.cookie = updatedCookie;
    }
    function getCookie(name) {
        var matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
    
    muz_id="";
    taym=0;
    procent=0;
    
    function timeplay ()
    {
        rangeplay.value = audio.currentTime;
        
        currentProc=Math.floor(audio.currentTime/audio.duration*100);
        if(!(currentProc==procent)){procent=currentProc;taym++};
        
    }
    
    var startplay;
    var audio;
    var rangeplay;
    var chip;
    var audioid;
    var bplayid;
    var rangeid;
    var volume;
    var idButton;
    $(document).ready(function(){
        chip=1;
    });
    function stopPlay(idButt)
    {
        $('#'+idButt+'').attr('value','play');
        audio.pause();
        clearInterval(startplay);
    }
    function bplayckick(paramA,paramB,idB,idV){
    
        if(!(idB==muz_id)){
            muz_id=idB;
            /*
            Тут нужно вставить код отправки на сервер содержимого переменной taym
            Наверно с помощью ajax
            */
            taym=0;
        };
        
        //alert(chip + paramA + " " + audioid);
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        volume = document.getElementById(idV);
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        //alert(rangeplay.max);
        if(audio.paused)
        {
            audio.play();
            if(getCookie('volume')!=='undefined')
            {
                audio.volume = getCookie('volume');
                volume.value=getCookie('volume')*100;
            }
 
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            audio.pause();
            $('#'+idB+'').attr('value','play');
            clearInterval(startplay);
            chip=1;
        }
 
    }
    function mdown(paramA,paramB,idB){
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
            $('#'+idB+'').attr('value','pause');
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        if(chip==2)
        {
 
            clearInterval(startplay);
            if(audio.paused)
            {
                audio.play();
            }
            else
            {
 
 
 
            }
        }
 
    }
    function mup(idB,paramA){
        audio.currentTime = rangeplay.value;
        if(chip==1)
        {
            audio.play();
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            clearInterval(startplay);
            startplay=setInterval(timeplay,1000/66);
 
        }
    }
    function FunVolume(paramA,idV){
        volume = document.getElementById(idV);
        audio = document.getElementById(paramA);
        audio.volume = volume.value/100;
        setCookie('volume',audio.volume,['2678400','/','/','false']);
    }
    function overblosks(idV)
    {
        if(getCookie('volume')!=='undefined')
        {
            volume = document.getElementById(idV);
            volume.value=getCookie('volume')*100;
        }
 
        $("#"+idV+"").show();
    }
    function outBloks(idV)
    {
        $("#"+idV+"").hide();
    }
    </script>
Цитата Сообщение от SanychBY Посмотреть сообщение
А как бы еще показывать на сколько песня загрузилась?
Не понял?
0
 Аватар для SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532
01.01.2014, 02:37  [ТС]
Цитата Сообщение от Опан Посмотреть сообщение
Не понял?
С НГ Вас!
Ну обычно при просмотре видео или прослушивания песни показывается насколько оно захешировалось
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
01.01.2014, 04:32
Цитата Сообщение от SanychBY Посмотреть сообщение
С НГ Вас!
Взаимно !!!
Цитата Сообщение от SanychBY Посмотреть сообщение
показывается насколько оно захешировалось
Можно какой-то пример или ссылку? Честно говоря, не понял, о чём речь.
0
 Аватар для SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532
01.01.2014, 04:34  [ТС]
Цитата Сообщение от Опан Посмотреть сообщение
Можно какой-то пример или ссылку? Честно говоря, не понял, о чём речь.
да на ютьюб зайдите например, включите видео, красная полоса это сколько видео проигралось, а впереди серая - на сколько загрузилось
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
01.01.2014, 04:45
Ясно. Используйте для воспроизведения музыки флэшплеер вместо элемента audio, и будет так же само, как на ютьюбе.
0
 Аватар для SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532
01.01.2014, 04:49  [ТС]
Цитата Сообщение от Опан Посмотреть сообщение
Ясно. Используйте для воспроизведения музыки флэшплеер вместо элемента audio, и будет так же само, как на ютьюбе.
да как я понял его геморойно делать. да и хочу поддержать новые технологии html5=)

Добавлено через 14 секунд
а использовать что то стороннее я не люблю
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
02.01.2014, 17:24
Во многих случаях стало традицией использовать флэш. Это и приятно смотрится, и удобно во всех отношениях. Флешплеер можно разработать самому с помощью программы flash-MX.

Не по теме:

Я всё планирую (но не нахожу времени) сделать плеер в виде патифона или граммофона с вращающейся граммпластинкой, и чтобы иглу можно было мышью переставлять с одного места на пластинке в другое, и при этом чтобы слышался характерный скрежет иглы поперёк борозд пластинки.

0
 Аватар для SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532
03.01.2014, 00:52  [ТС]
Цитата Сообщение от Опан Посмотреть сообщение
Во многих случаях стало традицией использовать флэш
У меня принципиальная позиция против=) С само его введения (помню как захожу в нэт и практически на каждом сайте предлагают его установить) мне он как то не по душе. Хотя для веб разработки какое то время использовал Дремвевер. Да и коммерция у Adobe просто зашкаливает на мой взгляд.

Добавлено через 6 часов 4 минуты
Установил я эту прогу. Теперь, как я понимаю, она Flash cs6 называется. Знать бы еще actionscript
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 03.01.2014, 00:52
Помогаю со студенческими работами здесь

50+ КНОПОК ДЛЯ САЙТА CSS3 HTML5 JS
В данной подборке кнопок html5 и css3 собрано 50+ разных оформлений кнопок а в итоге вышло 890 отдельных кнопок. Каждый для себя в данной...

Аудио плеер html5 для сайта с плейлистом
Может кто подсказать как можно сделать ауди плеер для сайта html5.

Не воспроизводит аудио поток в HTML5 на андроид
Всем привет! Делаю потоковое вещание (радио) через сервер + icecast + html5 При открытии потока в андроид напрямую localhost:8000...

Разработка html5 приложений под андроид
дело вот в чём: я так смотрю теперь js становится более менее нормальным языком, особенно с выходом es6 и появляются новые фрэимворки:...

Как презентации SWF флэш сайта перевести в HTML5 с сохранением эфектов ) Как правильно и полноценно Перевести SWF в HTML5
программа Sothink SWF Decompiler конвертирует SWF файл в HTML5 разбивая его на HTML и JS ...но она тянет только файл 15kb ...это очень...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
 http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru