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>

我不想用controls attr实现基本的html5音频，我自己这样做，我需要的是音量按钮的一些帮助。

Answer 1

以下是一些可能有用的代码。您可以使用validName(getElementById('name1'), ...)作为音量控制：

validName(getElementById('name1').value, ...)

使用音频元素的input type="range"属性更改声级：

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

您还可以将输入的值绑定到模型，或使用按钮而不是滑块 - 有很多变化，但您有了这个想法：）

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

1 个答案: