web-dev-qa-db-ja.com

HTML 5オーディオタグのカスタムコントロール？

カスタムコントロールでhtml 5オーディオタグをレンダリングする方法がわからないので、私はここでクレイジーピルを服用しているように感じます。

私はこれまでこのhtmlを持っていますが、問題なく動作します：

<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>

再生ボタンのみを表示し、おそらく再生中に一時停止ボタンをその場所に表示するにはどうすればよいですか？.

私が読んだものから、

デフォルトでは、この要素はプレーヤーコントロールを一切公開しません。プレーンな古いHTML、CSS、およびJavaScriptを使用して独自のコントロールを作成できます。この要素には、play（）やpause（）などのメソッドと、currentTimeという読み取り/書き込みプロパティがあります。読み取り/書き込みボリュームとミュートされたプロパティもあります。したがって、独自のインターフェイスを構築するために必要なものはすべて揃っています。

独自のインターフェイスを作成したくない場合は、ブラウザに組み込みのコントロールセットを表示するように指示できます。これを行うには、タグにcontrols属性を含めるだけです。

しかし、カスタムコントロールの使用例は見つかりません。再生ボタンだけを取得するにはどうすればよいですか？

html5html5-audio
26
Levitikon

次のように要素を作成します...

<audio id="yourAudio" preload='none'>
    <source src='the url to the audio' type='audio/wav' />
</audio>
<a href="#" id="audioControl">play!</a>

そして、いくつかの機能を追加します。

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};

現時点では、ボタンは単なるテキスト（「play！」または「pause！」）ですが、CSSを使って何でもできます。 innerHTMLを設定する代わりに、classNameを設定すれば準備完了です！

36
sdleihssirhc

プレーヤーの代わりにグラフィックを使用して実験してきました。 「audio」タグ内のスタイルを「display：none; width：0px; height：0px;」に設定します（iPadではdisplay noneは機能しないため、width-0とheight-0の設定が追加されます）。また、「controls」属性を含めなくても機能します。 （異なるシステム/ブラウザとデスクトップとiOSはすべて異なる動作をします.....）

例えば：

<head>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.play();
}
</script>
</head>

<body>
Click the speaker to hear the sound.  <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>

「javascript：null（）」はiPadで「return false;」と連動して機能します。通常の「＃」とは異なります。

より有用な情報： http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

5
Johnathan

組み込みの再生ボタンのみが必要な場合は、次のことができます。

autio-tagのクラス属性を使用します。

 <audio controls preload='auto' class="audio_volume_only"><source src='the url to the 
audio' type='audio/mp3' /></audio>

cssに適合します。

 .audio_volume_only {
    width: 35px;
  }

controls にはいくつかのパラメータがありますが、 しかし、見つからないか誤解されていません ..

次に、おそらく audio's onplay-event を使用して、CSSを必要に応じて変更します。再生ボタンは、組み込みコントロールの一時停止ボタンになります

他の人が指摘したように、いつでも自分で作ることができます。

4
womd