2012-04-06 5 views
12

私は年齢の答えを探していました。私は必要なものを見つけることができません。ウェブサイトにオーディオを埋め込む方法は?

オーディオ関連のものは一切コード化していません。

私がしたいことは、ウェブサイト内に音楽ファイルを埋め込むことです(サイトには何か小さなmp3プレーヤーがあります)。私は観客がカスタムメイドのコントローラーを使って曲を演奏したり止めたりできるようにしたい。

これらのカスタムメイドのボタンをすべて正しく動作させるにはどうすればよいですか?

私はHTMLとCSS(他の人にはPHPやJavaなどが残っています)を記述するだけです。テンプレート上にこの機能を作成するために私に何をすべきですか?

ありがとう=)

P.S.

私はあなたがHTML 5を使用している場合XHTML 1.0過渡的

答えて

24

多くのものを使用できます。

  • あなたが標準中毒している場合は、HTML5 <audio>タグを使用することができます:

Here is the official W3C specification for the audio tagを。

使用法:

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

注:私はまだ(1を使用したことがないようは、私は、最高のものであるかわかりません)。


UPDATE:別の答えのコメントで述べたように、あなたは暫定XHTML 1.0を使用しています。あなたは<audio>を何らかのハックで動かすことができるかもしれません。


UPDATE 2:私はちょうどプレイオーディオを行うための別の方法を思い出しました。このはXHTMLで動作します!これは完全に標準に準拠しています。あなたはthisようなものを使用することができ、コントロールをカスタマイズするには:

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); 

This is my answer to another question.


UPDATE 3:

あなたはこのはJavaScriptを使用しています。

+0

コントローラーボタンをカスタマイズする方法を知っていますか? S.私は 'MP3プレーヤー'の名前は "ウェブサイトの音楽プレーヤー"よりも退屈だと思う: - P – Vetaxili

+1

@ベタキシリこの質問はあなたを助けるかもしれない:http://stackoverflow.com/questions/7638754/html-5-audio-tag-custom-コントロール –

+0

あなたの答えは、私が探しているものであり、うまくいくと思います。私は今外出しなければなりませんが、私の問題を解決したかどうかは間違いなくお知らせします。 :-) – Vetaxili

0

を使用する必要があり、<audio>要素があります。 MDN

audio要素は、HTMLやXHTML文書の音声コンテンツを埋め込むために使用されます。 audio要素はHTML5の一部として追加されました。


更新:

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

+0

申し訳ありませんが、私は言及を忘れていました。私はXHTML 1を使用する必要があります。0移行。 コントローラーをどのようにコードする必要があるか知っていますか?カスタムのものをデフォルトのものよりも使用できるようにするには? – Vetaxili

+0

@ベタキシリ - 細部、え? _edit_あなたの質問とこの詳細を追加してください。 – Oded

4

間違いなく、HTML5要素を使用してください。そこのほぼすべてのブラウザの最新バージョンではそれのための少なくとも基本的なサポートです:

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

は、そして、それは要素がブラウザでサポートされていない場合にどうするかを指定することができます。たとえば、あなたが実行してファイルへのリンクを追加することができます。

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

最後に、良い:

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

あなたは以下のリンクでの音声要素については、この例やより多くの情報を見つけることができますニュースは、mozillaのAprilの開発者Derbyがこの要素について書いているので、おそらくこの要素を最大限に活用する方法の大きな例をたくさん提供するつもりです。

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

01ここで
+1

プレーヤーのコントロールをカスタマイズしたい場合は、ここでの操作方法の説明をご覧ください(http://terrillthompson.com/blog/32) – txominpelu

1

有効なXHTMLでアクセスオーディオプレーヤーとW3C Web Audio APIへの非侵入javascriptの感謝を作るためのソリューションです:

行うにはどのような:

  1. ブラウザが読み取ることができる場合には、ブラウザが読み取ることができない場合には、我々は我々だけで、ファイルへのリンクアルの

まずレンダリング、コントロール

  • を表示しますlは、ブラウザがウェブオーディオ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)my demo pageにどのように動作するかを確認することができます

    だけ再生するには、リンクをクリックすると、一時停止し、再びクリックします。ブラウザがそれをネイティブに読むことができるならば、それはなります。できない場合は、ファイルをダウンロードする必要があります。

    これはほんの少しの例ですが、ページの任意の要素をコントロールボタンとして使用するか、javascriptを使用してオンザフライで生成するように改善することができます。

  • 0

    私は、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> 
    

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

    -1
    <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> 
    
    関連する問題