angularjs firebaseのリンクからオーディオを再生します

Question

リンクfirebaseからオーディオ（OGG）ファイルを再生するためのhtml5メディアプレーヤーを読み込む際に問題が発生しました。

https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9

Answer 1

問題：

はここに私の見解だ

<my-audio> 
    <audio> 
     <source id="lol" ng-src="{{msg.text}}" /> 
    </audio> 
    <button class="play">Play Music</button> 
    <button class="pause">Pause Music</button> 
</my-audio> 

は、ここに私の指示

angular.module('myApp') 
.directive('myAudio', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attr) { 
      var player = element.children('.player')[0]; 
      element.children('.play').on('click', function() { 

       player.play(); 

      }); 
      element.children('.pause').on('click', function() { 
       player.pause(); 
      }); 
     } 
    }; 
}); 

{{msg.text}} firebaseリンクから来て、例ですによると、どのようにクラスごとに要素を選択するかについてです、.children()はセレクタをサポートしていないため、別の方法で選択する必要があります。例えば

：

var $playBtn = angular.element(element[0].getElementsByClassName('play')); 

私は例示するために、静的Audioオブジェクトを使用した例を作った：HTML <audio> tagを使用して

angular.module('myApp', []) 
 
    .directive('myAudio', function() { 
 
    return { 
 
     restrict: 'E', 
 
     link: function(scope, element, attr) { 
 

 
     // Using a static Audio object 
 
     var player = new Audio('https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9'); 
 
     
 
     var elm = element[0], 
 
      byClass = function(klass) { 
 
      return angular.element(elm.getElementsByClassName(klass)); 
 
      }; 
 

 
     byClass('play') 
 
      .on('click', function() { 
 

 
      player.play(); 
 

 
      }); 
 
     byClass('pause') 
 
      .on('click', function() { 
 
      player.pause(); 
 
      }); 
 
     } 
 
    }; 
 
    }); 
 

 
angular.element(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<my-audio> 
 
    <button class="play">Play Music</button> 
 
    <button class="pause">Pause Music</button> 
 
</my-audio> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

UPDATE例を追加しました。

angular.module('myApp', []) 
 
    .directive('myAudio', function() { 
 
    return { 
 
     restrict: 'E', 
 
     link: function(scope, element, attr) {    
 
     
 
     // Using html <audio> tag with controlls 
 
     var player = element.find('audio')[0]; 
 
     
 
     var elm = element[0], 
 
      byClass = function(klass) { 
 
      return angular.element(elm.getElementsByClassName(klass)); 
 
      }; 
 

 
     byClass('play') 
 
      .on('click', function() { 
 

 
      player.play(); 
 

 
      }); 
 
     byClass('pause') 
 
      .on('click', function() { 
 
      player.pause(); 
 
      }); 
 
     } 
 
    }; 
 
    }); 
 

 
angular.element(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<my-audio> 
 
    <audio src="https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9" controls></audio> 
 
    <button class="play">Play Music</button> 
 
    <button class="pause">Pause Music</button> 
 
</my-audio> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>