12

私がやりたいことは、Web サイト内に音楽ファイルを埋め込むことです (サイトに小さな mp3 プレーヤーを用意してください)。カスタムメイドのコントローラーを使って、観客が曲を再生したり、停止したりできるようにしたいです。

カスタムメイドのボタンがすべて正常に動作するようにコーディングするにはどうすればよいですか?

4

6 に答える 6

29

いろいろ使えます。

  • あなたが標準中毒者なら、HTML5<audio>タグを使うことができます:

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。

注: (まだ) 使用したことがないため、どれが最適かはわかりません。

更新:別の回答のコメントで述べたように、XHTML 1.0 Transitional を使用しています。<audio>いくつかのハックで仕事を始めることができるかもしれません。

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

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

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

于 2012-04-06T10:11:06.127 に答える
4

間違いなく、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>

この例と audio 要素の詳細については、次のリンクを参照してください。

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

最後に、良いニュースは、mozilla の 4 月の dev Derby がこの要素に関するものであるため、おそらくこの要素を最大限に活用する方法の素晴らしい例がたくさん提供されることです:

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

于 2012-04-06T10:11:30.307 に答える
1

これらのほとんどで 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>

私が試したブラウザではうまくいきましたが、現時点では古いブラウザがいくつかありませんでした。

于 2013-12-30T16:06:30.807 に答える
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>
于 2014-11-17T22:31:59.270 に答える
1

W3C Web Audio APIのおかげで、有効な xHTMLと邪魔にならない 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 を使用してオンザフライで生成したりできるように改善できます。

于 2012-11-23T14:02:41.623 に答える