Воспроизведение аудио с помощью JQuery

Question

У меня есть небольшая функция jQuery для воспроизведения звука, когда пользователь нажимает на ссылку. Мне не нужны никакие элементы управления, это короткие образцы. Я просто хочу играть в любое время, когда пользователь нажимает. Вот html для раздела, который должен играть;

</div class="classicalRecordings"> 
     <a href="#" class="play" data-audio-src="music/classical/open.mp3">Open song</a> 
    </div> 

Тогда это jQuery для воспроизведения звука;

 function playMusic(){ 
      var audioElement = document.createElement('audio'); 
      var audioElementSrc = $(this).attr('data-audio-src'); 
      audioElement.setAttribute('src', audioElementSrc); 
      $.get(); 
      audioElement.addEventListener("load", function(){ 
       audioElement.play(); 
      }, true); 
     } 
     $(function(){ 
      $('.play').click(playMusic); 
     }); 

Это не работает. Я думаю, что это связано с переменной src, я не уверен, что правильно передаю ее в AudioElement. Я тестировал с помощью предупреждения, чтобы убедиться, что правильно захватил data-audio-src. Любая помощь приветствуется.

Answer 1

Я думаю, что событие, которое вы ищете, является загруженным событием.

function playMusic(){ 
     var audioElement = document.createElement('audio'); 
     var audioElementSrc = $(this).attr('data-audio-src'); 
     audioElement.setAttribute('src', audioElementSrc); 
     $.get(); 
     // changed "load" t0 "loadeddata" 
     audioElement.addEventListener("loadeddata", function(){ 
      audioElement.play(); 
     }, true); 
    } 
    $(function(){ 
     $('.play').click(playMusic); 
    }); 

Хотя вы, вероятно, может быть лучше иметь статический элемент аудио и изменив атрибут Src на клики, а не создавать новый звуковой элемент.

// example 
var audio = document.getElementsByTagName('audio')[0]; 
audio.addEventListener('loadeddata', function() { 
    this.play(); 
}, true); 
function playMusic() { 
    var audioElementSrc = $(this).attr('data-audio-src'); 
    audio.setAttribute('src', audioElementSrc); 
}; 
$('.play').click(playMusic); 

Существует основа для этого, которую стоит проверить. ListenJS. Я написал это :)

Answer 2

попробовать что-то вроде этого:

<audio id="sound"> 
    <source src="music/classical/open.mp3" type="audio/mpeg"> 
</audio> 

И из кода:

$(function(){ 
     $('#sound').get(0).play(); 
    });