Custom html5 audio tag, how to add volume buttons?

I'm just creating a directive to set up live streaming based on HTML5 tags, but I need to add a volume button, how to achieve it?

see instructions

var app = angular.module('app', []);

app.directive('audioPlay', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attr) {

      scope.playOrPause = true;

      var player = element.children('.player')[0];

      scope.playMusic = function() {
        scope.playOrPause = false;
        player.play();
      }

      scope.stopMusic = function() {
        scope.playOrPause = true;
        player.pause();
      }

    }
  };
});

Here is the corresponding html

<div ng-app='app'>
      <audio-play>
        <audio class="player">
          <source src="http://fire.wavestreamer.com:9711/UrbanetRadio"/>
        </audio>
        <button class="button button-clear"
                ng-click="playMusic()"
                ng-hide="!playOrPause">
          PLAY
        </button>
        <button class="button button-clear"
                ng-click="stopMusic()"
                ng-show="!playOrPause">
          PAUSE
        </button>
      </audio-play>
</div>

I don't want to use controlsattr for basic html5 audio , I am doing it myself, what I need is help with the volume buttons.