Воспроизведение аудио в HTML - PullRequest
Новая
       22

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

10 голосов
/ 27 декабря 2011

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

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

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

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

Ответы [ 4 ]

12 голосов
/ 27 декабря 2011

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

<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 года.

1 голос
/ 27 декабря 2011

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

1 голос
/ 27 декабря 2011

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

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

0 голосов
/ 12 декабря 2012

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

<!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>
...