Почему не работает код с тегом audio с управлением через js?

Question

[pashulke]

<audio class="audiocontrol">
         <source src="" type="audio/mpeg" class="song">
</audio>

$(document).ready(function() {
    
    function selectAndPlay() {
        var song1 = 'a.mp3';
        var song2 = 'b.mp3';
        var song3 = 'c.mp3';
    
        var music = [ song1, song2, song3 ];
    
        var selectedsong = music[Math.round(Math.random()*(music.length-1))];
    
        $('.song').attr('src', 'music/'+selectedsong);
        
        $('.audiocontrol').on('canplay', function() { 
            this.currentTime = 30; 
            this.play();
        });

    };
    
    $('.play').on('click', function() {
        selectAndPlay();
    });
    
});

Код такой. Не работает воспроизведение. Если поставить controls в тег audio, то можно увидеть, что песня там вообще не появляется, как и изменение времени на 30 с.
Если сделать просто onready функцию selectAndPlay, то всё работает. Может кто-нибудь объяснить, почему это не работает?

Answer 1

[Евгений Петров]

Заменил событие на loadeddata

HTML

<audio class="audiocontrol" type="audio/mpeg"></audio>

JS

$(function () {
	var music = [
			'a1.mp3',
			'a2.mp3',
			'a3.mp3'
		],
		player = $('.audiocontrol');

	$('.play').on('click', function () {
		player.attr({
			src: 'music/' + music[Math.round(Math.random() * (music.length - 1))]
		});
	});
	player.on('loadeddata', function () {
		this.currentTime = 30;
		this.play();
	});
});