AngularJS: Play/Mute-Taste bei Audio-Previews

Question

Ich versuche gerade, eine Website für einen Musiker zu machen und er möchte kleine Previews seiner Songs von seinem Album auf der Website haben.

Ich habe jetzt ein JSON-Array mit den Namen der Songs, die ich in AngularJS laden und laden auf die Seite mit

<tr ng-repeat="song in info.songs"> 
     <td> 
      <a href="" ng-click='startPlayback(song.url)' class="play-symbol"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></a> 
      <a href="" ng-click='stopPlayback()' class="stop-symbol"><span class="glyphicon glyphicon-volume-off" aria-hidden="true"></a> 
     </td> 
     <td>{{song.title}}</td> 
     ... 
</tr> 

Wie Sie Ich habe auch eine „startPlayback“ und „stopPlayback“ sehen kann, die macht genau das, was es sagt.

Mein Problem ist jetzt, dass ich nur das "glyphicon-headphones" -Symbol am Anfang anzeigen möchte, wenn ich die Wiedergabe NUR den Kopfhörer an dem Lied starte, das ich anfing zu spielen, ändert sich zur "glyphicon-Lautstärke-aus" Symbol. Ich bin schon so weit gekommen, aber jetzt laufe ich auf das Problem:

Ich will es, so dass Sie jetzt auf einen anderen Kopfhörer ("Start") Symbol klicken können, stoppt die Wiedergabe zu spielen (Ich habe auch schon das), wechselt das Stummschaltungssymbol vom "alten" Lied, das abgespielt wurde, zurück in Kopfhörer und das "neue" Symbol ändert sich in das Stummschaltungssymbol.

Wie würden Sie so etwas erreichen?

Answer 1

Ich denke, Sie können ngClass directive verwenden, um dynamisch css-Klassen mit dem Status des Songs, der gerade spielt, umzuschalten. Weiß nicht, wie genau Sie Code in Controller aussehen, aber hoffe, meine Idee wird Ihnen helfen. Also für die Markup Sie so etwas wie (es ist ein good practice to use track by for repeaters and one time bindings, wenn Sie kümmern sich um die Leistung) verwenden können:

<tr ng-repeat="song in info.songs track by song.id"> 
     <td> 
      <a href="javascript:void(0)" ng-click='togglePlayback(song, info.songs)' class="play-symbol" ng-class="{'play-symbol' : !song.isPlaying, 'stop-symbol': song.isPlaying}"> 
      <span class="glyphicon" aria-hidden="true" ng-class="{'glyphicon-headphones' : !song.isPlaying, 'glyphicon-volume-off': song.isPlaying}"></span> 
      </a> 
     </td> 
     <td>{{::song.title}}</td> 
     ... 
</tr> 

Und in der Steuerung können Sie die Methode, die den Zustand des Songs wechseln wird, auf den geklickt wurde:

$scope.togglePlayback = function(song, songs){ 
    //set "stopped" css class for all songs except the one was clicked 
    angular.forEach(songs, function(s){ 
     if (s.id != song.id) { 
      s.isPlaying = false; 
     } 
    }); 

    //toggle the song was clicked 
    song.isPlaying = !song.isPlaying; 

    //some you code to start/stop playback depending on the song.isPlaying value 
    //... 

} 

Hoffe, das wird Ihnen helfen.