自動播放音頻和使用JQuery

下面只播放一次是音頻播放器的樣品：自動播放音頻和使用JQuery

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>audio.js</title> 
    <script src="./audiojs/audio.min.js"></script> 
    <link rel="stylesheet" href="./includes/index.css" media="screen"> 
    <script> 
     audiojs.events.ready(function() { 
     audiojs.createAll(); 
     }); 
    </script> 
    </head> 
    <body> 
    <header> 
     <h1>audio.js</h1> 
    </header> 

    <audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio> 


    </body> 
</html>

有了這個，我想添加一些約束等不希望顯示播放button.Instead它將自動10秒後進行遊戲，只能玩一次。我該怎麼辦。如果有人知道解決方案，請幫我解決這個問題。參考。 https://kolber.github.io/audiojs/

來源

2017-02-13 Kavya Shree

您可以通過改變它的.play-pause風格display:none

設置autoplay到false，以避免在播放負荷和使用setTimeout 10秒後打隱藏播放/暫停按鈕。

請參閱下面的代碼

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>audio.js</title> 
    <script src="./audiojs/audio.min.js"></script> 
    <link rel="stylesheet" href="./includes/index.css" media="screen"> 
    <style> 
     .play-pause { 
      display: none; 
     } 

     .scrubber { 
      display: none; 
     } 

     .audiojs { 
      width: 110px; 
     } 

     .audiojs .time { 
      border-left: none; 
     } 
    </style> 
</head> 

<body> 
    <header> 
     <h1>audio.js</h1> 
    </header> 

    <audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" id="player"></audio> 
    <label id="audio_stats"></label> 
    <script> 
     var element = document.getElementById("player"); 
     var settings = { 
      autoplay: false, 
      loop: false, 
      preload: true, 
      swfLocation: 'audiojs/audiojs.swf', 
      trackEnded: function (e) { 
       document.getElementById("audio_stats").innerText = "Track Ended..."; 
      } 
     } 

     audiojs.events.ready(function() { 
      var a = audiojs.create(element, settings); 
      var count = 11; 
      var counter = setInterval(timer, 1000); 

      function timer() { 
       count = count - 1; 
       if (count <= 0) { 
        clearInterval(counter); 
        a.play(); 
        document.getElementById("audio_stats").innerText = "Playing..."; 
        return; 
       } 
       document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec."; 
      } 
     }); 
    </script> 
</body> 
</html>

來源

2017-02-14 07:58:04

我要添加文本之上，如音頻「音頻將在10秒開始，9秒計時器一樣會出現」音頻完成後同樣會顯示文本completed.And它只能播放一次 –

此外用戶無法轉發或倒退音頻 –

@KavyaShree檢查更新的答案 –

自動播放音頻和使用JQuery

回答

相關問題