BarnyBroken
@BarnyBroken
Дизайнер, веб-разработчик.

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

Добрый день. Помогите пожалуйста сделать правильно функцию и повесить ее на 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го трека.

Заранее спасибо.
  • Вопрос задан
  • 2420 просмотров
Решения вопроса 1
@sainttechnik
Frontend developer, в прошлом админ
Нужно получать элемент не по индексу, а соседнее с кнопкой воспроизведения аудио. Если сохранить структуру 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.
Рекомендую почитать рекомендации для улучшения качества кода.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы