Q:

Audio tag, how to handle it from Angular

I am using the HTML5 audio tag, but I want to control it from Angular, according to the guidelines I don't have to touch the DOM from the Controllers so I have to create a Directive.
Let's say I have this 2 buttons
<button onclick="playMusic()" type="button">Play Music</button>
<button onclick="pauseMusic()" type="button">Pause Music</button>

and this in the JS part
var music = document.getElementById("myMusic"); 

function playMusic() { 
    music.play(); 
} 

function pauseMusic() { 
    music.pause(); 
} 

but I need to transcript that into Angular, so, how can I create a directive for that ? or hoy can I implement it in a Controller ?

A:

In angular, any DOM manipulation should really be handled in a directive (see documentation). This is to separate concerns and to improve the testability of other angular actors such as controllers and services. 
A basic directive to play audio might look something like this (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 the 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>

