Javascript AngularJS：音频预览上的播放/静音按钮

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

现在我有了一个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>

{{song.title}
...

正如你所见，我还创建了一个“startPlayback”和“stopPlayback”，它完全按照它所说的做

我现在的问题是，我只希望在开始播放时显示“glyphicon耳机”符号，当我开始播放歌曲时，只希望在开始播放歌曲时显示“glyphicon音量关闭”符号的耳机。 我已经走了这么远，但现在我遇到了问题：

我想要它，这样你现在可以点击任何其他耳机（“开始”）图标，播放停止（我也已经知道了），播放的“旧”歌曲中的静音符号变回耳机，“新”符号变为静音符号

您将如何实现这样的效果？

我认为您可以使用当前播放的歌曲的状态来动态切换css类。 不知道您在控制器中编写的代码是什么样子的， 但希望我的想法能对你有所帮助。因此，对于标记，您可以使用以下内容（如果您关心性能，则这是一个问题）：

希望这对你有帮助

我认为您可以使用当前播放的歌曲的状态来动态切换css类。 不知道您在控制器中编写的代码是什么样子的， 但希望我的想法能对你有所帮助。因此，对于标记，您可以使用以下内容（如果您关心性能，则这是一个问题）：

希望这对你有帮助

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

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

 }