Angularjs:音频预览上的播放/静音按钮

Question

我目前正在尝试为音乐家创建一个网站，他想在网站上对他的专辑的歌曲进行小的预览。

我现在有一个带有我加载到gangularjs的歌曲名称的JSON数组，并用

加载到页面上

<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"one_answers" stopplayback"，它确实可以做到。

我现在的问题是，我只想在开始时出现"字形手机"符号，而我开始播放的歌曲中只播放播放的耳机，更改为" Glyphicon-Volume-Off"符号。。我已经走了很远，但是现在我遇到了问题：

我想要它，以便您现在可以单击任何其他耳机(" start"(图标，播放停止播放(我也已经知道(，这是"旧"歌曲中的静音符号耳机和"新"符号更改为静音符号。

您将如何实现这样的目标？

Answer 1

我认为您可以使用当前正在播放的歌曲的状态使用NGCLASS指令来动态切换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
    //...
 }

希望这对您有帮助。