Нужно получать элемент не по индексу, а соседнее с кнопкой воспроизведения аудио. Если сохранить структуру 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.
Рекомендую почитать
рекомендации для улучшения качества кода.