web-dev-qa-db-ja.com

HTMLを使用してWebサイトにメディアプレーヤーを埋め込む

私がやりたいのは、ウェブサイトに音楽ファイルを埋め込むことです（サイトに何か小さなMP3プレーヤーがあります）。カスタムメイドのコントローラーを使用して、聴衆が曲を再生、停止などできるようにしたいと思います。

それらがすべて正常に機能するように、これらのカスタムメイドのボタンをどのようにコーディングしますか？

htmlembedaudio-player
12
Vetaxili

あなたはたくさんのものを使うことができます。

  • あなたが標準中毒者なら、HTML5 <audio> 鬼ごっこ：

音声タグの公式W3C仕様です 。

使用法：

<audio controls>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <!-- The next two lines are only executed if the browser doesn't support MP4 files -->
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 <!-- The next line will only be executed if the browser doesn't support the <audio> tag-->
 <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

jsFiddle here

注：どれもbestを使用したことがないため、どれが（まだ）。

UPDATE：別の回答のコメントで述べたように、XHTML 1.0 Transitionalを使用しています。 <audio>いくつかのハックを使用します。

UPDATE 2：オーディオを再生する別の方法を思い出しました。このはXHTMLで機能しますこれは完全に標準に準拠しています。

これを使用しますJavaScript：

var aud = document.createElement("iframe");
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path
aud.setAttribute('width', '1px');
aud.setAttribute('height', '1px');
aud.setAttribute('scrolling', 'no');
aud.style.border = "0px";
document.body.appendChild(aud);

これは別の質問に対する私の答えです。

UPDATE 3：コントロールをカスタマイズするには、 this のようなものを使用できます。

28
Anish Gupta

間違いなく、HTML5要素が道です。ほとんどすべてのブラウザーの最新バージョンでは、少なくとも基本的なサポートがあります。

http://caniuse.com/#feat=audio

また、要素がブラウザでサポートされていない場合の処理​​を指定できます。たとえば、次のようにしてファイルにリンクを追加できます。

<audio controls src="intro.mp3">
   <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a>
</audio>

次のリンクで、この例とオーディオ要素に関する詳細情報を見つけることができます。

http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/

最後に、mozillaのAprilの開発者Derbyはこの要素に関するものであるため、この要素を最大限に活用するための優れた例が多数提供されるでしょう。

http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/

4
txominpelu

有効なxHTMLと W3C Web Audio API による非侵入型JavaScriptを使用して、アクセス可能なオーディオプレーヤーを作成するソリューションを次に示します。

何をすべきか ：

  1. ブラウザが読み取り可能な場合、コントロールを表示します
  2. ブラウザが読み込めない場合は、ファイルへのリンクをレンダリングするだけです

まず、ブラウザーにWeb Audio APIが実装されているかどうかを確認します。

_if (typeof Audio === 'undefined') {
    // abort
}
_

次に、Audioオブジェクトをインスタンス化します。

_var player = new Audio('mysong.ogg');
_

次に、ブラウザがこのタイプのファイルをデコードできるかどうかを確認できます。

_if(!player.canPlayType('audio/ogg')) {
    // abort
}
_

または、コーデックを再生できる場合でも：

_if(!player.canPlayType('audio/ogg; codecs="vorbis"')) {
    // abort
}
_

次に、player.play()、player.pause();を使用できます。

これをテストするために nanodio という小さなJQueryプラグインを作成しました。

私のデモページ （申し訳ありませんが、テキストはフランス語にあります：p）

リンクをクリックして再生し、もう一度クリックして一時停止します。ブラウザーがネイティブで読み込める場合は、読み込めます。できない場合は、ファイルをダウンロードする必要があります。

これはほんの一例ですが、ページの任意の要素をコントロールボタンとして使用したり、JavaScriptを使用して動的に生成したりできます。

1
Charles-Édouard Coste
<html>

<head>
  <H1>
      Automatically play music files on your website when a page loads
    </H1>
</head>

<body>
  <embed src="YourMusic.mp3" autostart="true" loop="true" width="2" height="0">
  </embed>
</body>

</html>
1
Qais Yousuf

これらのほとんどでIEまたはChromeが窒息しているか、外部ライブラリが必要です。MP3を再生したかっただけで、ページ http://www.w3schools.com/html/html_sounds.asp 非常に役立つ。

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

私が試したブラウザで私のために働いていましたが、現時点では古いもののいくつかを持っていませんでした。

0
Karl Henselin

HTML 5を使用している場合、<audio>要素。

オン [〜＃〜] mdn [〜＃〜] ：

audio要素は、HTMLまたはXHTMLドキュメントにサウンドコンテンツを埋め込むために使用されます。オーディオ要素は、HTML5の一部として追加されました。

更新：

5より前のHTMLバージョン（XHTMLを含む）でブラウザーでオーディオを再生するには、多くのフラッシュオーディオプレーヤーのいずれかを使用する必要があります。

0
Oded