У меня есть пример - проигрывается музыка - http://www.smartjava.org/examples/webaudio/example3.html Как сюда добавить кнопки аудио плеера с управлением?
1 ответ
Если вы используете тег <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>
И все!
-
Спасибо за ответ, но понимаете, мне нужно интегрировать плеер именно в имеющийся пример....что думаете. Реально?– trigger19 мая 2015 в 8:28
-
Конечно можно, смотрите update.– user2669919 мая 2015 в 13:26