<audio id="myaudio" class="hide"> HTML5 audio </audio>
<button id="btn" ng-click="playAudio()">Click</button>
$scope.playAudio = function(){
var oAudio = document.getElementById('myaudio');
oAudio.src = audiofile;
oAudio.load();
oAudio.play();
}
I have used the above code. Now this code is not working on continuous usage, like if we click 10-12 times this will not work.
It is bad practice to access DOM from the controller. You should use a directive to do this job.
I am using something like this:
yourApp.directive('audioPlayer', function () {
return {
restrict: 'E',
scope: {
src: '=src'
},
link: function (scope, element) {
var audioElement = document.createElement('audio');
audioElement.src = scope.src;
audioElement.controls = 'controls';
element.html(audioElement);
}
};
});
and in the HTML:
<audio-player src="scope.audio"></audio-player>
