Воспроизведение аудио в HTML

Я хочу воспроизвести аудиофайл mp3 в формате HTML. Я не хочу отображать весь проигрыватель с элементами управления, такими как громкость и т. д. Мне просто нужна кнопка воспроизведения/паузы, разработанная мной, а не основной дизайн какого-либо проигрывателя, такого как проигрыватель yahoo или google.

Например, звук будет воспроизводиться автоматически. Когда нажимается кнопка (возможно, изображение), она приостанавливается, а когда это изображение нажимается снова, звук воспроизводится снова.

Здесь довольно много примеров: http://www.w3schools.com/html/html_sounds.asp< /а>

Могу ли я управлять любым из них для воспроизведения/остановки из кода JS?


html audio playback
person Sohail    schedule 27.12.2011    source источник
comment
К сожалению, реализация этого самостоятельно - это что-то вроде кошмара. Я рекомендую использовать для этого подключаемый модуль — официального Javascript API для аудио просто не существует.   -  person Peter Olson    schedule 27.12.2011
comment
вспышка была бы единственной альтернативой для этого   -  person Joseph    schedule 27.12.2011

Ответы (4)


arrow_upward
15
arrow_downward

Вы можете использовать тег audio html5. Вы можете указать свои собственные элементы управления для воспроизведения.

<audio preload="auto" autobuffer> 
  <source src="elvis.mp3" />
  <source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>

Это решение jQuery.

http://jsfiddle.net/QPW27/109/

Вот как будет выглядеть ваше решение, отличное от jQuery.

var foo = document.getElementById('player');
foo.pause();  //just bind play/pause to some onclick events on your page
foo.play();

Разные браузеры поддерживают разные аудиоформаты. Однако вы можете указать резервные версии аудио. На этом сайте есть хорошая таблица поддержки браузеров по состоянию на июль 2011 года.

person mrtsherman    schedule 27.12.2011

arrow_upward
2
arrow_downward

Будем надеяться, что через несколько лет HTML5 audio API будет поддерживаться в большем количестве браузеров, но в настоящее время для воспроизведения звуков требуется либо множество специфичных для браузера хаков, чтобы все заработало, либо зависимость от плагина для браузера, такого как flash.

А пока я рекомендую использовать SoundManager2. С ним довольно легко работать, и это потребует гораздо меньше головной боли, чем если бы вы делали это самостоятельно.

person Peter Olson    schedule 27.12.2011

arrow_upward
1
arrow_downward

Audio.js выглядит так, как будто в нем есть функции стиля проигрывателя, которые вы ищете, с изящной деградацией до Flash, если браузер не поддерживает новый аудио API.

person Aaron    schedule 27.12.2011

arrow_upward
0
arrow_downward

Вы можете воспроизводить аудио, используя тег embed

<!DOCTYPE html>
<html>
<body>

<p><a href="horse.mp3">Play mp3</a></p>
<p><a href="liar.wav">Play wav</a></p>

<script src="http://mediaplayer.yahoo.com/js"></script>

</body>
</html>
person chandru    schedule 12.12.2012