javascript - AngularJS:音频预览上的播放/静音按钮

Question

我目前正在尝试为一位音乐家制作一个网站，他希望在该网站上预览他专辑中的歌曲。

我现在有一个 JSON 数组，其中包含我加载到 AngularJS 中的歌曲名称，并使用 加载到页面上

<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>

如您所见，我还创建了“startPlayback”和“stopPlayback”，其功能正如其所言。

我现在的问题是，我只想在开始时显示“glyphicon-headphones”符号，当我开始播放时，只有我开始播放的歌曲处的耳机会更改为“glyphicon-volume-off”符号。 我已经做到了这一点，但现在遇到了问题:

我想要它，这样你现在可以单击任何其他耳机(“开始”)图标，播放停止播放(我也已经得到了)，播放的“旧”歌曲中的静音符号变回耳机和"new"符号更改为静音符号。

你会如何实现这样的目标？

Answer 1

我认为你可以使用ngClass directive使用当前正在播放的歌曲的状态动态切换 css 类。 不知道你在 Controller 中的代码到底是什么样的， 但希望我的想法能帮助你。因此，对于标记，您可以使用类似的内容(如果您关心性能，则为 good practice to use track by for repeaters and one time bindings):

<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>

在 Controller 中，您可以使用切换所单击歌曲的状态的方法:

 $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
    //...

 }

希望这对您有帮助。