web-dev-qa-db-ja.com

HTMLでオーディオを再生する

HTMLでmp3オーディオファイルを再生したい。音量などのコントロールでプレーヤー全体を表示したくありません。必要なのは、yahooプレーヤーやgoogleプレーヤーなどの一部のプレーヤーのコアデザインではなく、自分でデザインした再生/一時停止ボタンだけです。

たとえば、音声は自動再生されます。ボタン（おそらく画像）をクリックすると一時停止し、その画像をもう一度クリックするとオーディオが再び再生されます。

ここにはかなりの数の例があります： http://www.w3schools.com/html/html_sounds.asp

JSコードから再生/停止するようにそれらのいずれかを制御できますか？

htmlaudioplayback
13
Sohail

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年7月現在。

15
mrtsherman

うまくいけば、数年以内に HTML5オーディオAPI がより多くのブラウザでサポートされるようになりますが、現在、サウンドを再生するには、動作させるためにブラウザ固有のハックをたくさん行うか、ブラウザプラグインに依存する必要がありますフラッシュのように。

それまでの間、 SoundManager2 を使用することをお勧めします。作業はかなり簡単で、自分で行うよりも頭痛の種がはるかに少なくなります。

2
Peter Olson

Audio.js ブラウザーが新しいオーディオAPIをサポートしていない場合、Flashが正常に機能しなくなり、探しているプレーヤーのスタイリング機能が含まれているように見えます。

1
Aaron

埋め込みタグを使用してオーディオを再生できます

<!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>
0
chandru