2

javascript で html5 オーディオ用の独自のプレーヤーを作成しようとしています。次のような htm5 オーディオ プレーヤーの再生、一時停止、音量オプションがあります。

<audio id="playe" src="song.ogg"></audio>
<div>
<button onclick="document.getElementById('playe').play()">Play</button>
<button onclick="document.getElementById('playe').pause()">Pause</button>
<button onclick="document.getElementById('playe').volume += 0.1">Vol+ </button>
<button onclick="document.getElementById('playe').volume -= 0.1">Vol- </button>
<button onclick="if(document.getElementById('playe').volume == 0){document.getElementById('playe').volume += 1.0;}else{document.getElementById('playe').volume = 0;}">Mute</button>
</div>

しかし、そこにタイムラインを表示するにはどうすればよいですか? それは私が適用した「ミュート」オプションの正しい方法ですか?

-ありがとう。

4

1 に答える 1

4

属性については既に知っていてcontrols、独自のプレーヤーを作成することを選択していると思いますか? ( JSFiddleで見る)

その場合は、読み進めてください...

タイムラインを表示するにはどうすればよいですか?

(セマンティックな理由から) 使用するのに理想的な 2 つの要素を考えることができます。最初は<input type="range">要素です。こちらでご覧ください。Javascript で DOM 要素のcurrentTimeおよびプロパティを使用して、要素をターゲットにし、属性の値を設定できます。duration

5.1 の仕様によると、この要素には「正確な値は重要ではないという注意事項があります」。これはおそらく、ビデオのタイムラインには当てはまりませんよね? ユーザーに正確な値を知ってもらいたいのです。それにもかかわらず、仕様のそのフレーズは、要素に関連付けられた番号を表示する機能がない理由を説明しています。

しかし、もちろん、YouTube がスライダーの上に時間を表示しないのと同じように、別の要素に時間を表示することもできます (ホバーしていない限り)。このために、output要素を使用する必要があります。これは、「計算の結果」に使用されることを意図しており、暗黙のうちに別の Html 要素の計算の結果にも使用されます。これがfor属性を持つ理由です。それを別の要素の値に「バインド」します。この場合、for範囲入力の識別子を作成します。

私が今書いたことの小さな例として、Chris Coyier によるこのアイデアの実装をチェックすることをお勧めします。要約すると、彼が使用する Html は次のようになります。

<input type="range" name="foo">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>

そして、css見栄えを良くするために出力をスタイリングします。気の利いたね？

ランダムなメモ: 要素の DOM 要素がaudioHTMLMediaElement の子である場合があり、MDNでこれらのすべてのプロパティとメソッドの適切なリストを見つけることができます。これは、独自のオーディオ プレーヤーを構築する際に役立つことは間違いありません。HTMLAudioElement自体は、その親にあまり追加しません。

範囲入力の問題は、Shadow DOM を最も確実に利用する Html ウィジェットであるため、現時点ではスタイリングが非常に難しいことです (実際、おそらく Chromeを除くすべてのブラウザーでは不可能です)。

範囲入力の外観を本当にスタイルする必要がある場合、ほとんどの制御は、動作を模倣する Javascript ウィジェットを使用することです。ご存じのとおり、Html 要素の束をまとめて範囲入力のように見せ、Js を使用して機能を配線します。

これが個人用または Chrome や Safari を使用するチーム用である場合は、これをWeb Componentにすることができます。しかし、Shadow DOM はまだ十分にサポートされていません。

ミュートするのは正しい方法ですか？

HTMLMediaElementsにはミュートメソッドがないので、はい、それを行うにはそのようなスクリプトを少し書く必要があります.

ただし、おそらくスクリプトの動作を変更するでしょう。ユーザーは、ミュート時に音量を「保存」し、ミュートを解除するとその値に戻ることに慣れていると思います。現在、スクリプトにはこの動作はありません。私は間違いなくそれを追加します！

他の考え...

インライン Javascript は一般的に嫌われています。管理しやすくするために、すべてを外部ファイル、または少なくともスクリプト タグに移動してみませんか? プラグインを作成して、すべてをモジュール化することもできます。

于 2013-05-31T01:46:28.807 に答える