Использование Angular.js для воспроизведения звука во время нажатия кнопки

Question

Я использую Angular.js и некоторые Jquery сделать некоторые кнопки воспроизведения звука во время clicked.This является HTML-код:

<audio id="audio"> 
    <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></source> 
    <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></source> 
    <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></source> 
    <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></source> 
</audio> 
<button class='t-l bt' ng-click='play_sound(0)'></button> 
<button class='t-r bt' ng-click='play_sound(1)'></button> 
<button class='b-l bt' ng-click='play_sound(2)'></button> 
<button class='b-r bt' ng-click='play_sound(3)'></button> 

Это мой код функции:

$scope.play_sound = function(order){ 
     var audio = $('#audio')[order]; 
     audio.play(); 
    } 

функция работает, когда я 0 передается в качестве аргумента и не проходя другие number.This, что я получил в консоли Google:

angular.js:13920 TypeError: Cannot read property 'play' of undefined 
    at b.$scope.play_sound (index.js:10) 
    at fn (eval at compile (angular.js:14817), <anonymous>:4:234) 
    at b (angular.js:15906) 
    at e (angular.js:25885) 
    at b.$eval (angular.js:17682) 
    at b.$apply (angular.js:17782) 
    at HTMLButtonElement.<anonymous> (angular.js:25890) 
    at HTMLButtonElement.dispatch (jquery.min.js:3) 
    at HTMLButtonElement.q.handle (jquery.min.js:3) 

Answer 1

Вы можете попробовать ниже. Идея заключается в том, чтобы получить отдельный исходный файл и воспроизвести этот звук по заказу.

$scope.play_sound = function(order){ 
     var audioSource = $('#audio source')[order]; 
     var audio = new Audio(audioSource.attr("src"); 
     audio.play(); 
    }