2017-02-13 17 views
0

Ниже приведен пример для аудиоплеера:AutoPlay аудио и играть только один раз с помощью 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/

ответ

1

Вы можете скрыть кнопку воспроизведения/паузы, изменив свой стиль .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> 
+0

Я хочу, чтобы добавить текст выше аудио, как «звук будет начинаться в 10 секунд, 9 секунд, как таймер покажет» и точно так же после завершения аудио он будет показывать текст completed.And он может воспроизводиться только один раз –

+0

Кроме того, пользователь не может переадресовать или назад аудио –

+0

@KavyaShree Проверьте обновленный ответ –

 Смежные вопросы

  • Нет связанных вопросов^_^