Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
arcmag
259 / 255 / 115
Регистрация: 27.06.2014
Сообщений: 665
#1

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

30.12.2014, 10:00. Просмотров 1241. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Работа с аудио файлом (JavaScript):

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

Работа с Excel файлом с помощью JavaScript - JavaScript
Pomogite kto mozhet, pozhalujsta! Nuzhno otkrit' suwestvujuwij excel fajl, schitat' dannye ot tuda, zapisat' novye. vse.

Аудио - JavaScript
Интересует вопрос относительно аудиозаписи. Как её вставить на сайт (без плеера) и можно ли сделать так, чтобы она автоматически...

Включение аудио - JavaScript
Друзья всем привет! Подскажите пожалуйста... Имеется код &lt;audio src=&quot;audio/pogladit.mp3&quot; &gt;&lt;/audio&gt; &lt;audio src=&quot;audio/razozlit.mp3&quot;...

Запись аудио (звука) - JavaScript
Здравствуйте! Помогите сделать запись звука в самом браузере с помощью яваскрипта, именно яваскрипта, а не флеш. Что-бы по нажатию...

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

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

что до getElementsByClassName - это не функция и вообще не яваскрипт, это DHTML-метод (иначе DOM-метод)
0
arcmag
259 / 255 / 115
Регистрация: 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
Опан
Юзер с абсолютным слухом
557 / 368 / 82
Регистрация: 17.12.2010
Сообщений: 1,121
30.12.2014, 23:43 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Вот ответы на первые три вопроса:
1) Чтобы перейти в заданное место прослушивания, нужно задать значение свойства currentTime в секундах:
audio.currentTime=15;
а чтобы это произошло при клике на прогрессбаре, нужно прописать в его событие onclick вывод значения его свойства value в currentTime Примерно так:
audio.currentTime=progress.value;
2)Для задавания громкости следует использовать свойство audio.volume
3)Длительность звучания всего файла олицетворяет свойство audio.duration
1
arcmag
259 / 255 / 115
Регистрация: 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
Опан
Юзер с абсолютным слухом
557 / 368 / 82
Регистрация: 17.12.2010
Сообщений: 1,121
31.12.2014, 23:18 #6
Значит-са... Ширина внешнего дива должна быть эквивалентной audio.duration, а ширина внутреннего дива - соответствено audio.currentTime Теперь, при клике по внешнему диву нужно поймать позицию курсора относительно левого края страницы, (сейчас не помню, какая функция) отнять от него позицию левого края внешнего дива относительно левого края страницы, то, что получилось, разделить на ширину внешнего дива, и умножить на audio.duration Получим audio.currentTime Это и есть заданное место для прослушивания после клика по внешнему диву. Вот такая математика.
0
arcmag
259 / 255 / 115
Регистрация: 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
Опан
Юзер с абсолютным слухом
557 / 368 / 82
Регистрация: 17.12.2010
Сообщений: 1,121
01.01.2015, 00:45 #8
Так ведь, кликать нужно не по полосе, а по всей шкале, иначе функция не сработает, если кликнуть правее полосы.
0
arcmag
259 / 255 / 115
Регистрация: 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
Привет! Вот еще темы с ответами:

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

Индикатор загрузки аудио файла - JavaScript
Драсте, ребята! В youtube-плеере есть индикатор, в котором есть два показателя: красный показывает сколько видео уже было проиграно, а...

Помогите со скриптом аудио(видео)плеера - JavaScript
Думается, их много может быть. Меня интересуют простенькие, компактные плееры (проигрываемые мп3шки и авишки лежат на том же сайте). Я...

Аудио плейер wav на HTML/CSS/JS - JavaScript
Я так понимаю это невозможно без флеша? Сразу хочу заметить, что HTML5 на IE не умеет wav.


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

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

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