javascript - Audio tag, how to handle it from Angular -

i using html5 audio tag, want control angular, according guidelines don't have touch dom controllers have create directive.

let's have 2 buttons

<button onclick="playmusic()" type="button">play music</button> <button onclick="pausemusic()" type="button">pause music</button> 

and in js part

var music = document.getelementbyid("mymusic");   function playmusic() {      music.play();  }   function pausemusic() {      music.pause();  }  

but need transcript angular, so, how can create directive ? or hoy can implement in controller ?

in angular, dom manipulation should handled in directive (see documentation). separate concerns , improve testability of other angular actors such controllers , services.

a basic directive play audio might (fiddle):

app.directive('myaudio', function() {     return {         restrict: 'e',         link: function(scope, element, attr) {             var player = element.children('.player')[0];             element.children('.play').on('click', function() {                 player.play();             });             element.children('.pause').on('click', function() {                 player.pause();             });         }     }; }); 

and associated html:

<my-audio>     <audio>         <source src="demo-audio.ogg" />         <source src="demo-audio.mp3" />     </audio>     <button class="play">play music</button>     <button class="pause">pause music</button>    </my-audio>