Как сделать функцию playaudio и повесить на onclick?

Question

[Алексей Черток]

Добрый день. Помогите пожалуйста сделать правильно функцию и повесить ее на onClick.

Есть такой html:

<div class="mainPostAudio" onclick="playPause(this)">
                                <audio src="audio2.mp3" class="audioPlayer"></audio>
                                <div class="audioButs">
                                    <div class="mainAudioPlay"><i class="i-play"></i></div>
                                    <div class="mainAudioPause"><i class="i-pause"></i></div>
                                </div>
                                <div class="audioName"><a href="/">Ferry Tayle - Shields </a></div>
                                <div class="audioTime"></div>
                                <div class="audioBar"><span class="audioProgress"></span></div>
                            </div>

Вот кусок jQuery:

var counter = 0;
    $(".mainAudioPlay").click(function(){
        $(".audioPlayer")[counter].play();
        $(this).hide();
        $(".mainAudioPause").show();
    })
    $(".mainAudioPause").click(function(){
        $(".audioPlayer")[counter].pause();
        $(this).hide();
        $(".mainAudioPlay").show();
    })
    $(".audioPlayer").bind('timeupdate', function(){
        var track_length = $(".audioPlayer")[counter].duration;
        var secs = $(".audioPlayer")[counter].currentTime;
        var progress = (secs/track_length) * 100;
        $('.audioProgress').css({'width' : progress + "%"});
        var tcMins = parseInt(secs/60);
        var tcSecs = parseInt(secs - (tcMins * 60));
        if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
        $('.audioTime').html(tcMins + ':' + tcSecs);
    })

Но он работает только если с этим классом 1 аудиозапись. Надо сделать функцию и повесить ее на onClick. Что бы можно было проигрывать множество аудио. Так же нужно как то сделать что бы при воспроизведении одного трека, другой отключился.

Добрый люди, помогите пожалуйста. Сам уже 2й день делаю разные функции и ничего не выходит. Приходиться возвращаться до проигрывания 1го трека.

Заранее спасибо.

Answer 1

[Александр Ковпашко]

Нужно получать элемент не по индексу, а соседнее с кнопкой воспроизведения аудио. Если сохранить структуру HTML, то воспроизведение можно сделать как-то так:

var playingAudio;
$(document.body).on('click', '.mainAudioPlay', function() {
    var playButton = $(this),
        pauseButton = playButton.siblings('.mainAudioPause'),
        audioToPlay = playButton.closest('.mainPostAudio').find('audio').get(0);
        
    if (playingAudio) {
        playingAudio.pause();
    }
    
    audioToPlay.play();
    playingAudio = audioToPlay;
    playButton.hide();
    pauseButton.show();
});

$(document.body).on('click', '.mainAudioPause', function() {
    var pauseButton = $(this),
        playButton = playButton.siblings('.mainAudioPlay'),
        audioToPause = playButton.closest('.mainPostAudio').find('audio').get(0);

    audioToPause.pause();
    pauseButton.hide();
    playButton.show();
});

$(document.body).on('timeupdate', '.audioPlayer', function() {
    var audioBlock = $(this).closest('.mainPostAudio'),
        progressBar = audioBlock.find('.audioProgress'),
        audioTime = audioBlock.find('.audioTime'),
        track_length = this.duration,
        secs = this.currentTime,
        tcMins = parseInt(secs / 60, 10),
        tcSecs = parseInt(secs - (tcMins * 60), 10),
        progress = (secs / track_length) * 100;
        
    progressBar.css({'width' : progress + "%"});      
    audioTime.html(tcMins + ':' + ( '0' + tcSecs).slice(-2) );
});

Обработчики событий лучше вешать не на каждое аудио, а на весь контейнер с делегированием. Элемент, на котором сработало событие все равно будет доступен в обработчике как this.
Рекомендую почитать рекомендации для улучшения качества кода.

Comments

[Алексей Черток]

Спасибо, как бы заработало. Но есть еще один вопрос, точнее просьба помочь, как мне теперь определить currentTime и ProgressBar ?

[Александр Ковпашко]

Дописал в ответ. Настоятельно рекомендую разобраться как все это работает, если собираетесь дальше писать на JS.

[Алексей Черток]

Эм у меня все перестало работать .. ))) Все скрипты ... После того как подключил Ваш код .. ))

[Алексей Черток]

Проблему устранил. Но не работает не progressBar не currentTime ((

[Алексей Черток]

Тоже самое, когда нажимаешь уже на другой трек, первый игарть перестает, но все равно светиться иконка паузы, хотя в коде написано что она должна исчезнуть, а кнопочка play появиться

[Александр Ковпашко]

Я допустил ошибку. Вроде поправил. На крайний случай есть консоль ошибок браузера и браузерный отладчик. Это не так сложно - посмотреть где что не срабатывает.