创建使用HTML5音频元素

我是新与角AngularJS一个新的指令，我已经取得了音响按键采用了棱角分明的指令：创建使用HTML5音频元素

app.directive('soundButton', [function() { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs) { 
      var audioSrc = attrs.origem; 
      var audio = new Audio(audioSrc); 

      scope.play = function() { 
       if (audio.paused) { 
        audio.play(); 
       } else { 
        audio.pause(); 
       } 
      }; 

      element.css({ 
       borderRadius: '50%', 
       width: '100px', 
       height: '100px', 
       backgroundColor: 'red', 
       display: 'inline-block' 
      }); 

     } 
    } 
}]);

...并把html代码我的网页上：

<section id="bla" data-ng-controller="Ctrl"> 
      <sound-button data-ng-click="play()" origem="http://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/sys100%20drumkit/24[kb]909-klick.aif.mp3" class="col-md-4"></sound-button> 
      <sound-button data-ng-click="play()" origem="http://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/sys100%20drumkit/2[kb]hihat_closed.aif.mp3" class="col-md-4"></sound-button> 
      <sound-button data-ng-click="play()" origem="http://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/sys100%20drumkit/34[kb]noicybell.aif.mp3" class="col-md-4"></sound-button> 
     </section>

但总是点击音频按钮，它会播放相同的声音。（我怀疑这可能是问题的元件的阵列）

FIDDLERJS：http://jsfiddle.net/qumjmz9y/

来源

2014-11-24 Vitor Venturin

音频元件具有源元件。所以你必须改变这个元素。看here

来源

2014-11-24 13:03:29

但是当我实例化新的音频对象这种情况下，我已经设置源：VAR音频=新的音频（源）;或不？ – 2014-11-24 13:10:29

http://jsfiddle.net/qumjmz9y/ – 2014-11-24 13:20:29

fiddle => [link]（http://jsfiddle.net/qumjmz9y/2/）你的错误是直接到达音频元素。如果（audio.paused）{audio.play（）;}}。 } else { audio.pause（）; } };' 链接函数中的音频元素指示最新的音频源。所以你必须以某种方式找到音频**并调用播放暂停功能。我使用_ $ event_作为您的播放函数调用的参数。 – 2014-11-24 16:33:34

你应该定义内源标签

app.directive('soundButton', [function() { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs) { 
      var audioSrc = attrs.origem, 
       audio = angular.element('<audio/>'), 
       inner = angular.element('<source/>'); 

      inner.attr('src', audioSrc); 
      audio.attr('autoplay', true); 
      audio.attr('control', false); 
      //audio.attr('loop', true); 
      element.append(audio); 
      audio.append(inner); 

      scope.play = function() { 

       if (audio[0].paused) { 
        audio[0].play(); 
       } else { 
        audio[0].pause(); 
       } 
      }; 

      element.css({ 
       borderRadius: '50%', 
       width: '100px', 
       height: '100px', 
       backgroundColor: 'red', 
       display: 'inline-block' 
      }); 

     } 
    } 
}]);

来源

2017-03-11 13:28:06

创建使用HTML5音频元素

回答

相关问题