Question

我是HTML5中的初学者，甚至不是JS的中间人，但我正在试图弄清楚如何正确使用<audio>并使其他人......所以我得到了这个问题......我的HTML：

<i class='some_icon' onclick='play();'>
  <audio src='some_mp3.mp3' id='player'></audio>
</i>

现在，当我点击图标时，我想要播放一些mp3文件，因为我写了这个js：

function play() {
    var my = document.getElementById('player');
    if (my.paused) {
      my.play();
    } else {
      my.pause();
      my.currentTime = 0
    }
  }

但是，此外，我想更改我的图标WHEN那个mp3文件ENDS ...我怎么能这样做？任何帮助将不胜感激：）

Answer 1

以下是在音频（或视频）结束时触发某些代码的代码：

var my = document.getElementById('player');

my.addEventListener("ended", function(e){
  // here goes your code to change the icon
}, false);

Answer 2

我知道昨天已经回答/接受了，但我只是想我会分享一整套代码，以便将来用户受益。（声音片段只有4秒长）

 function play() {
   var my = document.getElementById('player');
   my.currentTime = 0;
   /**this one loops***/
   if ($('.btn').find('span i').hasClass('fa-stop')) {
     $('.btn').find('span i').removeClass('fa-stop').addClass('fa-play-circle');
     $('.texto').text("Play");
   }
   if (my.paused) {
     my.play();
   } else {
     my.pause();
     my.currentTime = 0;
   }
   my.addEventListener("ended", function(e) {
     $('.btn').find('span i').removeClass('fa-play-circle').addClass('fa-stop');
     $('.texto').text("Stop");
   });
 }

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Audio Icon Toggle</title>
</head>

<body>
  <div id="music">
    <h2>Audio Icon Toggle</h2>
    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#player" onclick="play();"><span><i class="fa fa-play-circle" aria-hidden="true"></i>&nbsp;&nbsp;<span class="texto">Play</span></span>
      <audio src="http://www.rachelgallen.com/monkey.mp3" id="player" class="collapse"></audio>
    </button>
  </div>
</body>
</html>

如何抓住＆＃39;停止＆＃39;在HTML5音频事件然后做一些事情？

2 个答案: