6

Всем привет. Делаю плеер на сайте, используя html5, тег <audio>. Все бы замечательно, но стандартный плеер приходится менять.

На странице выводится несколько аудиозаписей, поэтому нужно каждый отслеживать по id. Какие шаги я сделал:

Выводится тег <audio src='/puth/audio.mp3' id='audio_ID'></audio> Таким образом, стандартный плеер не видно и теперь можно работать с javascript.

Написал несколько функций:

var Audio = {
    play: function(id)
    {
        obj = ge(id);
        if(!obj){
            return false;
        }
        obj.play();
        return;
    }
    ,stop: function(id)
    {
        obj = ge(id);
        if(!obj){
            return false;
        }
        obj.pause();
        return;
    }
    ,stopAll: function()
    {
        obj = $('audio');
        if(!obj){
            return false;
        }
        obj.pause();
        return;
    }
    ,PlayPause: function(id)
    {
        obj = ge(id);

        if(obj.paused){
            this.play(id);
            $('#icon_play_'+id).removeClass('icon-play').addClass('icon-pause');
        }else{
            this.stop(id);
            $('#icon_play_'+id).removeClass('icon-pause').addClass('icon-play');
        }
   }
}

Написан стандартный функционал (Играть, остановить, переключатель).

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

Принцип ползунка такой:

<div class="currentTime"><div class="buffer" style="width: 50%;"><div class="pointTime" style="width: 10%;"></div></div></div>

Нужно создать событие для отображения изменений. Но представления не имею по реализации. Так же хотелось бы получить советы в направление работы над изменением ползунка (движении и изменение текущего времени воспроизведения).

Любые советы, наброски, статьи будут к стати.

5
  • А зачем делать велосипед, если есть реализованные плееры? Например тот же jplayer - там можно по-умолчанию поставить html, а для всех остальных (у кого нет html5) оставить flash? Там просто уже реализованные все ваши вопросы. 11 окт 2012 в 17:52
  • 1
    @андрей-советкин, велосипеды: 1. Интересно писать самому, а потом уже смотреть на чужие решения, корректировать недоработки. 2. Есть часть процесса обучения. Если судить по вашей логике - обучение программированию никому не нужно - ведь всё что нужно реализовано - подставляй новый пак, либу(и .т.д) и сиди...ровно. 3. Лучше чем писать миллион костылей под уже готовый, с учётом всех требований и желаний . В один момент этот код станет, мягко говоря жалким говнокодом. Что уж там говорить - покаюсь - сам использую готовые решения когда не укладываюсь в сроки. Но потом делаю велосипеды.
    – stck
    12 окт 2012 в 3:43
  • @stck прав. Я придерживаюсь своим разработкам, так как они имеют именно то, что мне нужно, работает так, как мне нужно, а если что-то не нравится - код легко подредактировать. А jPlayer мне не нравится. Вопрос остается в силе. 12 окт 2012 в 8:56
  • Задача решена. Кому интересно, спросите - я напишу. 14 окт 2012 в 7:41
  • @Nick, обновите вопрос с решением и сделайте общим.
    – stck
    19 окт 2012 в 5:30

1 ответ 1

1

Вам повезло, относительно недавно нужно было на скорую руку накидать подобную демонстрацию, собственно ниже результат с прогресс-баром

Думаю ползунок тут и сами уже сделаете

см. HTML Audio/Video DOM Reference

;(function (list){
    var d = document,
        cnt = d.querySelector('.audioList');

    for (var i = 0; i < list.length; i++) {
        var audio = d.createElement('audio'),
            source = d.createElement('source');
        
        source.type = 'audio/mpeg';
        source.src = list[i];
        
        audio.appendChild(source);
        
        i++;
        
        var audioCnt = d.createElement('button'),
            progress = d.createElement('span');
        
        progress.innerText =
        audioCnt.innerText = list[i];
        audioCnt.addEventListener('click', (function(a){
            return function(){
                if (a.paused){
                    a.play();
                } else{
                    a.pause();
                }

                return false;
            };
        })(audio));
        
        audio.ontimeupdate = (function(){
            var pr = progress;
            
            return function(e){
                var m = e.path[0],
                    w = m.currentTime * 100 / m.duration;
                
                if (w > 0.01){
                    pr.style.display = 'block';
                } else{
                    pr.style.display = 'none';
                }
                
                pr.style.width = w + '%';
            }
        })();
        
        audioCnt.appendChild(progress);
        
        cnt.appendChild(audioCnt);
    }
})(['http://dl.dropbox.com/u/1538714/article_resources/song.m4a', 'some some music, bla bla bla', 
   'http://dl.dropbox.com/u/1538714/article_resources/song.m4a', 'alb alb alb ,cisum emos emos', 'http://dl.dropbox.com/u/1538714/article_resources/song.m4a', 'some some music, bla bla bla 222222222', 
   'http://dl.dropbox.com/u/1538714/article_resources/song.m4a', 'alb alb alb ,cisum emos emos 222222222']);
button{
    position:relative;
    height:35px;
    line-height:35px;
    padding:0px 3px;
    cursor:pointer;
    text-align:left;
    width:100%;
}
span{
    width:0px;
    text-align:left;
    color:#FFF;
    padding:0px 3px;
    display:inline-block;
    height:99%;
    position:absolute;
    top: 0px;
    left: 0px;
    overflow:hidden;
    white-space: nowrap;
    display:none;
    
    background-image: -webkit-gradient(
        linear,
        right bottom,
        left bottom,
        color-stop(0, #FFD0A1),
        color-stop(1, #9C9FFF)
    );
    background-image: -o-linear-gradient(left, #FFD0A1 0%, #9C9FFF 100%);
    background-image: -moz-linear-gradient(left, #FFD0A1 0%, #9C9FFF 100%);
    background-image: -webkit-linear-gradient(left, #FFD0A1 0%, #9C9FFF 100%);
    background-image: -ms-linear-gradient(left, #FFD0A1 0%, #9C9FFF 100%);
    background-image: linear-gradient(to left, #FFD0A1 0%, #9C9FFF 100%);
    transition: all linear .2s; */
}
<div class='audioList'>
<div>


Внимание! По нажатию на кнопки будет проигрываться мелодия, осторожнее в наушниках и ночью :)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.