customizing html5 audio tag, how to add a volume button?

Question

I just create a directive in order to set up a live streaming based on the HTML5 tag, but I need to add a volume button, how can I implement it ?

Look at the directive

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();
      }

    }
  };
});

and here 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 implement the basic html5 audio with the controls attr, I am doing this by myself and all I need is some help with volume button.

Answer 1

Here is some code that might help. You can use input type="range" as a volume control:

<input type="range" ng-model="volume" ng-change="changeVolume($event)" step="0.1" min="0" max="1">

And change sound level using volume property of the audio element:

scope.changeVolume = function(event) {
    player.volume = scope.volume; // from 0 to 1
};

You can also bind input's value to a model, or use buttons instead of a slider - there are many variations but you got the idea :)