自定义 html5 音频标签，如何添加音量按钮？

Question

我只是创建了一个指令，以便根据 HTML5 标签设置直播，但我需要添加一个音量按钮，我该如何实现？

看指令

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

    }
  };
});

这里对应的是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>

我不想使用 controlsattr 实现基本的 html5 音频，我正在自己做这件事，我需要的只是音量按钮的一些帮助。

Answer 1

下面是一些可能有用的代码。您可以使用 input type="range" 作为音量控制：

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

并使用音频元素的 volume 属性更改音量：

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

您还可以将输入的值绑定到模型，或者使用按钮而不是滑块 - 有很多变体，但您明白了:)

自定义 html5 音频标签，如何添加音量按钮？

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

html

javascript

audio

angularjs