2017-02-13 16 views
0
以下

使用して一度だけ再生するにはオーディオプレーヤーのためのサンプルです:これにより自動再生はオーディオと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秒後にプレイして1回しか再生できません。どうすればこのことができますか?誰かが解決策を知っていれば、私はこの問題から抜け出すのを助けてください。参照。 https://kolber.github.io/audiojs/

答えて

1

あなたは負荷で再生を回避し、10秒後に再生するためにsetTimeoutを使用するfalseに設定display:none

autoplay.play-pauseのそのスタイルを変更することにより、再生/一時停止ボタンを非表示にすることができます。

私は以下のように「音声が10秒に開始され、タイマーなどの9秒が表示されます」と同様に、オーディオの完了後に、それはcompleted.Andとしてテキストを表示しますオーディオの上にテキストを追加するコード

<!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> 
+0

の下に参照してください。それは一度だけ再生することができます –

+0

また、ユーザーは、オーディオを転送または後方にすることはできません –

+0

@ KavyaShree更新された回答を確認 –

関連する問題