Аудиоплеер на нативном JavaSript или jQuery

JavaScript/jQuery

События в медиа (audio, video) объектах

HTML:

<audio  controls id="player" width=640 height=480>
  <source src="bach.mp3" type="audio/mp3">
</audio>
<div>
     <input id="play" type="button" value="Play" />
     <input id="pause" type="button" value="Pause" />
     <span id="duration"> </span>
 </div>
 <div>
     Громкость:
     <input id="volume" type="range" min="0" max="10" value="5" />
 </div>
 // Создаем новый объект Audio
 var audio = new Audio('bach.mp3');

или:

let audio = new Audio('bach.mp3');

или (jQuery):

var audio = $('#player')[0];
Play - Pause

JavaSript:

 // Добавляем к кнопке с идентификатором "play" обработчик события onclick, внутри которого вызывается метод play
var play = document.getElementById('play');
 play.addEventListener('click', function(){
     audio.play();
 }, false);

jQuery:

var play = $('#play');
 $(play).on('click', function(){
     audio.play();
 });

JavaSript:

 // Находим кнопку и прикрепляем метод на событие onclick
 var pause = document.getElementById('pause');
 pause.addEventListener('click', function(){
     audio.pause();
 }, false);

jQuery:

 var pause = $('#pause');
 $(pause).on('click', function(){
     audio.pause();
 });
Громкость

JavaSript:

 // Найти HTML5-элемент input типа range и добавить обработчик события onchange для настройки звука
 var volume = document.getElementById('volume');
 volume.addEventListener('change', function(){
     audio.volume = parseFloat(this.value / 10);
 }, false);

jQuery:

 var volume = ('#volume');
 $(volume).on('change', function(){
     audio.volume = parseFloat(this.value / 10);
 });
Счётчик

JavaSript:

audio.addEventListener("timeupdate", function() {
     var duration = $('#duration');
     var s = parseInt(audio.currentTime % 60);
     var m = parseInt((audio.currentTime / 60) % 60);
     duration.html(m + '.' + s + 'sec');
 }, false);

jQuery:

 $(audio).on("timeupdate", function(e) {
     var duration = $('#duration');
     var s = parseInt(audio.currentTime % 60);
     var m = parseInt((audio.currentTime / 60) % 60);
     duration.html(m + '.' + s + 'sec');
 });

Для jQuery не збыть обернуть код:

$(document).ready(function() {});
Счётчик с временем звучания

jQuery:

audio.on("timeupdate", function() {
    var time = this.currentTime;
    var m = Math.floor(time / 60);
    var s = Math.floor(time - (m * 60));
    if (s < 10) s = '0' + s;
    if (m < 10) m = '0' + m;
    $('#currenttime').text(m + ':' + s);
  });
  audio.on("canplay", function() {
    var time = this.duration;
    var m = Math.floor(time / 60);
    var s = Math.floor(time - (m * 60));
    if (s < 10) s = '0' + s;
    if (m < 10) m = '0' + m;
    $('#duration').text(m + ':' + s);
  });

или

HTML:

<div id="counter">
<div id="display_time">
<span id="time">
<span id="currenttime">00:00</span> / <span id="duration">00:00</span></span>
</div>
</div>
$(audio).on('timeupdate', function(){
	//get hours $ mins
	var s = parseInt(audio.currentTime % 60);
	var m = parseInt((audio.currentTime)/60) %60;
	// Add 0 if < 10
	if(s < 10){
		s = '0'+s;
	}
	$('#duration').html(m + ':' + s);
 });

Отследить окончание проигрывания

Javascript

var audio = document.getElementById("myAudio");
audio.onended = function() {
    alert("The audio has ended");
};

или

audio.addEventListener("ended", function() {
   alert("The audio has ended");
});

jQuery

$(audio).on('ended', function(){
    alert("The audio has ended");
});

Articoli correlati