Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
arcmag
259 / 255 / 180
Регистрация: 27.06.2014
Сообщений: 665
1

Работа с аудио файлом

30.12.2014, 10:00. Просмотров 1299. Ответов 8
Метки нет (Все метки)

Здравствуйте, недавно узнал что можно при помощи JS управлять аудио и видео файлами, вот я и решил попробовать создать свою маленькую панель управления аудио файлом, что то получилось что то нет.
На данный момент есть функции запуска, паузы, остановки, ускорения, замедления и функция отвечающая за шкалу прогресса. Мне бы хотелось узнать как бы так сделать что бы можно было:

1) При клике на определенный отрезок шкалы прогресса перейти к указанному отрезку аудио файла (ну как во всех нормальных плеерах)
2) Как установить регулятор громкости
3) Как отобразить сколько времени всего будет проигрываться аудио файл (к примеру я то знаю что он идет 1.5 минуты но не в ручную же к каждому файлу подпись добавлять)?
Вот код
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
function clear_active(){ /*убрать класс active*/
    var butt_arr = document.getElementsByClassName("button");
    for(i=0; i<butt_arr.length; i++){
        butt_arr.item(i).classList.remove("active");
    }
}
function play(audio_element){ /*Запустить аудио*/
    clear_active();
    audio_element.classList.add("active");
    var audio = audio_element.parentNode.parentNode.parentNode.childNodes.item(2);
    audio.play();
}
function pause(audio_element){ /*Поставить на паузу*/
    clear_active();
    audio_element.classList.add("active");
    var audio = audio_element.parentNode.parentNode.parentNode.childNodes.item(2);
    audio.pause();
}
function stop_audio(audio_element){ /*Вернуть в начало*/
    clear_active();
    var audio = audio_element.parentNode.parentNode.parentNode.childNodes.item(2);
    audio.pause();
    audio.currentTime = 0;
}
 
function speed_up(audio_element){ /*Ускорить в 2 раза*/
    var audio = audio_element.parentNode.parentNode.parentNode.childNodes.item(2);
    audio.play();
    audio.playbackRate = 2;
}
function slow_down(audio_element){ /*Замедлить на половину*/
    var audio = audio_element.parentNode.parentNode.parentNode.childNodes.item(2);
    audio.play();
    audio.playbackRate = 0.5;
}
function normal_speed(audio_element){ /*Востановить скорость*/
    var audio = audio_element.parentNode.parentNode.parentNode.childNodes.item(2);
    audio.play();
    audio.playbackRate = 1;
}
function progress(audio_element){ /*Шкала прогресса*/
    var pos = audio_element.parentNode.childNodes.item(4).childNodes.item(1).childNodes.item(1);
    pos.style.width = (audio_element.currentTime / audio_element.duration * 100) +"%";
}
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
    <div class="audio_block"><div class="title_audio_block">Аудиозаписи</div>
   <div class="wrapperAudio test_tools"><!--<div class="title_audio"></div>-->
        <audio ontimeupdate="progress(this)">
           <source src="media/audio/ES.mp3" type="audio/mpeg" />
           <source src="media/audio/ES.ogg" type="audio/ogg" />
           <p>Тег audio не поддерживается вашим браузером.</p>
           <p>Увы, запустить музыкальный файл не удалось :) <a href="">скачать</a></p>
        </audio>
        <div class="audio_control">
            <div class="wrapperPosition">
                <div class="position"></div> 
            </div>
            <output id="out">00</output> 
            
            <div class="tools_control">
                <div class="button" onclick="play(this)">Play</div>
                <div class="button" onclick="pause(this)">Pause</div>
                <div class="button" onclick="stop_audio(this)">Stop</div>
                <div class="button" onclick="speed_up(this)">Ускорить</div>
                <div class="button" onclick="slow_down(this)">Замедлить</div>
                <div class="button" onclick="normal_speed(this)">Вернуть</div>
            </div>
        </div>
   </div>
   </div>
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
103
104
105
106
107
.audio_block{
    width:97%;
    margin:45px auto 25px auto;
    border:solid 1px black;
    border-radius:5px;
    padding:10px;
    background:rgba(0,0,0,.6);
    box-shadow:0px 0px 15px #999999;
}
.audio_block .title_audio_block{
    width:200px;
    text-align:center;
    margin:0px auto;
    margin-top:-20px;
    background:#000;
    color:#FFF;
    font-weight:bold;
    padding:3px 20px;
    border-radius:5px;
    box-shadow:inset 0px 0px 5px #CCCCCC;
}
.audio_block > .wrapperAudio{
    padding:5px;
    border:solid 1px #CCCCCC;
    background:rgba(0,0,0,.4);
    margin-top:5px;
    transition:all .6s;
    -moz-transition:all .6s;
    -ms-transition:all .6s;
    -o-transition:all .6s;
    -webkit-transition:all .6s;
}
.audio_block > .wrapperAudio:hover{
    box-shadow:inset 0px 0px 10px #FF0000, 0px 0px 10px #FF0000;
}
.audio_block .title_audio{
    font-weight:bold;
    display:inline-block;
    padding:0px 5px 20px 5px;
    margin-bottom:-3px;
    height:30px;
    border:solid 1px #000;
    color:#FFF;
    background:#000;
    border-radius:5px;
    border-bottom:0px;
    border-bottom-left-radius:0px;
}
.audio_block audio{
    width:100%;
    background:#000;
    border-radius:10px;
    border-top-left-radius:0px;
    height:35px;
}
.audio_block .test_tools .audio_control{
    position:relative;
}
.audio_block .test_tools .wrapperPosition{
    height:13px;
    width:75%;
    border:solid 1px #000000;
    background:#F90;
    margin:3px 5px 7px 0px;
    display:inline-block;
    box-shadow:inset 0px 0px 7px #0000FF,0px 0px 6px #00FFFF;
}
.audio_block .test_tools .wrapperPosition .position{
    height:100%;
    background:linear-gradient(to top, #060 50%, #090 52%, #090);
    box-shadow:inset 0px 0px 3px #FFF,0px 0px 7px red;
    width:0%;
}
.audio_block .test_tools output{
    position:absolute;
    text-align:center;
    display:inline-block;
    padding:0px 10px;
    width:90px;
    margin:0px 0px 10px 0px;
    background:#00F;
    background:linear-gradient(to top, #060 50%, #090 52%, #090);
    box-shadow:inset 0px 0px 3px #FFF,0px 0px 7px red;
}
.audio_block .test_tools .audio_control .tools_control{
    margin-left:5px;
}
.audio_block .test_tools .button{
    padding:2px 7px;
    margin-left:-3px;
    background:#000;
    background:#9D9D9D;
    box-shadow:0px 0px 7px #FF0000,inset 0px 0px 7px #FF0000;
    border:solid 0px #FFFF00;
    background:linear-gradient(to top, #000 50%, #434343 52%, #434343 100%);
    color:#FFF;
    display:inline-block;
}
.audio_block .test_tools .button:hover{
    background:#000;
    background:linear-gradient(to top, #333 50%, #666 52%, #666 100%);
    cursor:pointer;
}
.audio_block .test_tools .active{
    background:linear-gradient(to top, #F30 47%, #F60 53%, #F60 100%);
    box-shadow:0px 0px 7px #FFF,inset 0px 0px 7px #FFF;
}
Добавлено через 32 минуты
Так же есть еще 1 вопрос не совсем по теме, хотелось бы узнать нет ли хорошего сайта с полным перечнем всех функций JavaScript на русском?
Что то на подобие http://jquery.page2page.ru/tags/ifr.html
я знаю что есть сайт javascript.ru и что там много информации но мне нужен полный список всех функций в 1 месте, это очень сильно облегчило бы мне жизнь, а то бывает так что нужно что то сделать а решение куда проще чем кажется и делается при помощи 1 специальной функции но вот не всегда знаешь что это за функция, а так есть хотя бы шанс найти ее по имени как к примеру я искал способ найти элемент по классу а оказалось что это делается очень просто функцией getElementsByClassName и по ее названию сразу понятно для чего она ну и тд.
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
30.12.2014, 10:00
Ответы с готовыми решениями:

работа с файлом.
имеется файл с числами. как через сценарий считать с него данные и подсчитать...

Работа с Excel файлом с помощью JavaScript
Pomogite kto mozhet, pozhalujsta! Nuzhno otkrit' suwestvujuwij excel fajl,...

Аудио
Интересует вопрос относительно аудиозаписи. Как её вставить на сайт (без...

Включение аудио
Друзья всем привет! Подскажите пожалуйста... Имеется код &lt;audio...

Запись аудио (звука)
Здравствуйте! Помогите сделать запись звука в самом браузере с помощью...

8
kalabuni
Нарушитель
3241 / 2565 / 615
Регистрация: 18.04.2012
Сообщений: 7,708
30.12.2014, 13:30 2
Цитата Сообщение от arcmag Посмотреть сообщение
хотелось бы узнать нет ли хорошего сайта с полным перечнем всех функций JavaScript на русском?
такого сайта нет ни на каком языке, ни на русском, ни на английском, ни на китайском
дело в том, что встроенных функций в яваскрипте нет - есть только методы и свойства

что до getElementsByClassName - это не функция и вообще не яваскрипт, это DHTML-метод (иначе DOM-метод)
0
arcmag
259 / 255 / 180
Регистрация: 27.06.2014
Сообщений: 665
30.12.2014, 13:55  [ТС] 3
По поводу аудио вопросов больше нет) с трудном но таки удалось осилить материал
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function progress(audio_element){ /*Шкала прогресса*/
    var pos = audio_element.parentNode.childNodes.item(4).childNodes.item(1).childNodes.item(1);
    pos.style.width = (audio_element.currentTime / audio_element.duration * 100) +"%";
    var out = document.getElementById("out");
    out.innerHTML = audio_element.duration;
    pos2 = audio_element.parentNode.childNodes.item(4).childNodes.item(1);//Полоса 
    pos2.onclick = function(el){
        var click_proc = (pos2.clientWidth/100); 
        var x = el.offsetX==undefined?el.layerX:el.offsetX;
        var click_proc2 = (x/click_proc);
        pos.style.width = click_proc2+"%";
        var time_proc = audio_element.duration/100;
        time_proc *= click_proc2;
        audio_element.currentTime = time_proc;
    }
}
function volume(audio_element){ /*Регулятор звука*/
    var audio = audio_element.parentNode.parentNode.parentNode.childNodes.item(2);
    if(audio_element.value<10) audio.volume = 0+".0"+audio_element.value;
    else if(audio_element.value<100) audio.volume = 0+"."+audio_element.value;
    else audio.volume = 1;
}
такого сайта нет ни на каком языке, ни на русском, ни на английском, ни на китайском
дело в том, что встроенных функций в яваскрипте нет - есть только методы и свойства

что до getElementsByClassName - это не функция и вообще не яваскрипт, это DHTML-метод (иначе DOM-метод)
Ну извинте уж) немного путаюсь со вмем этим функции методы свойства ухх...
Тогда переформулирую - нет ли хорошего сайта с полным перечнем всех методов и свойств JavaScript на русском?
0
Опан
Юзер с абсолютным слухом
571 / 382 / 156
Регистрация: 17.12.2010
Сообщений: 1,153
30.12.2014, 23:43 4
Лучший ответ Сообщение было отмечено arcmag как решение

Решение

Вот ответы на первые три вопроса:
1) Чтобы перейти в заданное место прослушивания, нужно задать значение свойства currentTime в секундах:
audio.currentTime=15;
а чтобы это произошло при клике на прогрессбаре, нужно прописать в его событие onclick вывод значения его свойства value в currentTime Примерно так:
audio.currentTime=progress.value;
2)Для задавания громкости следует использовать свойство audio.volume
3)Длительность звучания всего файла олицетворяет свойство audio.duration
1
arcmag
259 / 255 / 180
Регистрация: 27.06.2014
Сообщений: 665
31.12.2014, 09:40  [ТС] 5
Цитата Сообщение от Опан Посмотреть сообщение
Вот ответы на первые три вопроса:
1) Чтобы перейти в заданное место прослушивания, нужно задать значение свойства currentTime в секундах:
audio.currentTime=15;
а чтобы это произошло при клике на прогрессбаре, нужно прописать в его событие onclick вывод значения его свойства value в currentTime Примерно так:
audio.currentTime=progress.value;
2)Для задавания громкости следует использовать свойство audio.volume
3)Длительность звучания всего файла олицетворяет свойство audio.duration
Да спасибо, я уже разобрался) вот только с 1 вопросом все было посложнее, я использовал вместо тега progress простой тег див с оберткой
HTML5
1
2
3
<div class="wrapperPosition">
    <div class="position"></div> 
</div>
тут мне пришлось поломать голову...
0
Опан
Юзер с абсолютным слухом
571 / 382 / 156
Регистрация: 17.12.2010
Сообщений: 1,153
31.12.2014, 23:18 6
Значит-са... Ширина внешнего дива должна быть эквивалентной audio.duration, а ширина внутреннего дива - соответствено audio.currentTime Теперь, при клике по внешнему диву нужно поймать позицию курсора относительно левого края страницы, (сейчас не помню, какая функция) отнять от него позицию левого края внешнего дива относительно левого края страницы, то, что получилось, разделить на ширину внешнего дива, и умножить на audio.duration Получим audio.currentTime Это и есть заданное место для прослушивания после клика по внешнему диву. Вот такая математика.
0
arcmag
259 / 255 / 180
Регистрация: 27.06.2014
Сообщений: 665
01.01.2015, 00:28  [ТС] 7
Цитата Сообщение от Опан Посмотреть сообщение
Значит-са... Ширина внешнего дива должна быть эквивалентной audio.duration, а ширина внутреннего дива - соответствено audio.currentTime Теперь, при клике по внешнему диву нужно поймать позицию курсора относительно левого края страницы, (сейчас не помню, какая функция) отнять от него позицию левого края внешнего дива относительно левого края страницы, то, что получилось, разделить на ширину внешнего дива, и умножить на audio.duration Получим audio.currentTime Это и есть заданное место для прослушивания после клика по внешнему диву. Вот такая математика.
У меня вот так получилось
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function progress(audio_element){ /*Шкала прогресса*/
    var pos = audio_element.parentNode.childNodes.item(4).childNodes.item(1).childNodes.item(1);
    pos.style.width = (audio_element.currentTime / audio_element.duration * 100) +"%";
    var out = document.getElementById("out");
    out.innerHTML = audio_element.duration;
    pos2 = audio_element.parentNode.childNodes.item(4).childNodes.item(1);//Полоса 
    pos2.onclick = function(el){
        var click_proc = (pos2.clientWidth/100); 
        var x = el.offsetX==undefined?el.layerX:el.offsetX;
        var click_proc2 = (x/click_proc);
        pos.style.width = click_proc2+"%";
        var time_proc = audio_element.duration/100;
        time_proc *= click_proc2;
        audio_element.currentTime = time_proc;
    }
}
0
Опан
Юзер с абсолютным слухом
571 / 382 / 156
Регистрация: 17.12.2010
Сообщений: 1,153
01.01.2015, 00:45 8
Так ведь, кликать нужно не по полосе, а по всей шкале, иначе функция не сработает, если кликнуть правее полосы.
0
arcmag
259 / 255 / 180
Регистрация: 27.06.2014
Сообщений: 665
01.01.2015, 09:30  [ТС] 9
Цитата Сообщение от Опан Посмотреть сообщение
Так ведь, кликать нужно не по полосе, а по всей шкале, иначе функция не сработает, если кликнуть правее полосы.
Ну я так и делаю)
pos - прогресс
pos2 - обертка
0
01.01.2015, 09:30
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.01.2015, 09:30

Проверка длины аудио
&lt;input id=&quot;fs&quot; type=&quot;file&quot;&gt; window.onload = function () { var...

Не получается узнать длину аудио
Здравствуйте. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Player&lt;/title&gt; ...

Аудио объект - Audio is not a constructor
var aud = new Audio(); aud.src('https://host/audios/audio1.mp3'); ...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru