2

У меня есть пример - проигрывается музыка - http://www.smartjava.org/examples/webaudio/example3.html Как сюда добавить кнопки аудио плеера с управлением?

1
  • 1
    Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 19 мая 2015 в 6:05

1 ответ 1

2

Если вы используете тег <audio>, то попробуйте так:

<audio id="myaudio" controls="controls">
  <source src="mysong.mp3" type="audio/mpeg"/> <!-- Наш файл -->
  Your browser does not support the audio element. <!-- Будет выведено, если браузер не поддерживает тег <audio> -->
</audio>
<div class="controls"> <!-- Наши кнопки управления -->
  <button onclick("togglePlay()") class='play_pause'>Toggle Play</button> <!-- Play / Pause -->
</div>
<script> <!-- Без JS никуда :) -->
  var myaudio = document.getElementById('myaudio'); // Найти аудио
  var playing = false;

  var togglePlay = function(){
    if(playing) // Если играет
      myaudio.pause(); // Останавливаем
    else
      myaudio.play(); // Иначе играем
  }
</script>

Это только часть. Вот классный туториал: http://ruseller.com/lessons.php?rub_id=32&id=1654.

UPD

Например, есть такой код:

<audio>
  <source src="mysong.mp3" type="audio/mpeg"/>
</audio>

К тегу <audio> добавляете атрибуты id="myaudio" controls="controls", а после тега, вставляете:

<div class="controls"> <!-- Наши кнопки управления -->
  <button onclick("togglePlay()") class='play_pause'>Toggle Play</button> <!-- Play / Pause -->
</div>
<script> <!-- Без JS никуда :) -->
  var myaudio = document.getElementById('myaudio'); // Найти аудио
  var playing = false;

  var togglePlay = function(){
    if(playing) // Если играет
      myaudio.pause(); // Останавливаем
    else
      myaudio.play(); // Иначе играем
  }
</script>

И все!

2
  • Спасибо за ответ, но понимаете, мне нужно интегрировать плеер именно в имеющийся пример....что думаете. Реально?
    – trigger
    19 мая 2015 в 8:28
  • Конечно можно, смотрите update.
    – user26699
    19 мая 2015 в 13:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.