Question

是否可以使用超棒的字体图标播放歌曲，例如，左侧将是歌曲名称（mp3），曲目名称的右侧将是一个播放字体超棒图标，是否有可能用户单击播放图标，曲目就会开始播放，他们可以暂停并停止播放

列表中大约有10首曲目

请问有人有示例代码或指向类似内容的链接吗？我猜想图标将需要某种JavaScript才能播放，暂停和停止

我找到了以下代码：http://jsfiddle.net/7341jxv6/2/，但正在尝试对其进行修改，以使用真棒的播放和暂停图标代替文本播放和暂停

我的更新代码如下

(((.)*,)*)(.)*

如果我单击播放图标，它会播放，但图标消失，但是如果我在同一位置单击，它会暂停音乐

Answer 1

您可以为该图标编写点击侦听器；

DOM看起来像这样

<div class="play-tab"> <div class="track-name">Some Track Name<div> <span class="icons"><i class="fa fa-play"/><span> <div>"

JQuery

$(".play-tab").on("click" , "i", function(e){//fetch song id and play})

Answer 2

如果您使用相同的按钮，则需要一个功能来更改图标并停止/播放音乐

scala> val dq = new ArrayDeque[Int]
dq: scala.collection.mutable.ArrayDeque[Int] = ArrayDeque()

scala> dq.append(1)
res1: dq.type = ArrayDeque(1)

scala> dq.append(2)
res2: dq.type = ArrayDeque(1, 2)

scala> dq
res3: scala.collection.mutable.ArrayDeque[Int] = ArrayDeque(1, 2)

var myAudio = document.getElementById('media_audio');
var icon = document.getElementById('toglePlayPause');
var togglePlayPauseButton = document.getElementById('media_controls_play-pause-button');
//Event listener for the play button
togglePlayPauseButton.addEventListener("click", function() {
       if ( myAudio.paused ||  myAudio.ended) {
          if ( myAudio ) {
              myAudio.title = 'Play';
              icon.className = "fa fa-play";
          }
          myAudio.play();
      } else {
          if ( myAudio ) {
              myAudio.title = 'Pause';
              icon.className = "fa fa-pause";
          }
          myAudio.pause();
      }
});

Answer 3

我已经更新了上面的代码，使其变得更近了，但是出现了单击播放后图标消失的问题

Answer 4

您尝试更改按钮元素上的图标，但该图标位于“ i”标记上。要修复该错误，您需要在代码中添加一个小的补丁

 var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0},
      focusTarget: 'category'
    };

使用字体超赞图标播放曲目

4 个答案: