HTMLのタグのスタイルを変更する方法

HTML5 の普及により、オーディオを使用してモバイル端末でほとんどのニーズに対応できるようになりました。ただし、単純な再生/停止エフェクトだけが必要な場合もありますが、ブラウザによってはオーディオ スタイルが満足のいくものではありません。このスタイルを変更しますか? 実際、その原理は比較的単純です。つまり、オーディオを記述するときに control 属性を使用せず、ネイティブ オーディオを非表示にし、p などのタグを使用して CSS スタイルを定義し、効果を表示するように美化します。最後に、js を使用してオーディオ イベント (基本的には src パス、一時停止、ロード、再生) をキャプチャします。以下は、audio タグの関連 API の一部です:

コントロール関数 関数の説明

load(): オーディオおよびビデオ ソフトウェアをロードします。再生前のプリロードに使用される動的に生成された要素でない限り、通常は呼び出す必要はありません

play (): オーディオ ファイルとビデオ ファイルをロードして再生します。ファイルが他の場所で一時停止されていない限り、デフォルトで再生が開始されます。

pause(): 再生中のオーディオ ファイルとビデオ ファイルを一時停止します。

オーディオスクリプトで制御可能な機能値:

src: オーディオファイルのパス。

autoplay: オーディオを自動的に再生するかどうかを設定します (デフォルトでは、読み込まれたメディア ファイルが自動的に再生されます)。または、自動再生に設定されているかどうかをクエリします。

autobuffer: ページの読み込み時にオーディオを自動的にバッファリングするかどうかを設定します。 if set 自動再生が無効になっている場合、この機能は無視されます。

loop: オーディオをループで再生するかどうかを設定します。 、またはループに設定されているかどうかを問い合わせます

currentTime: 再生の開始から現在までにかかった時間を秒単位で返します。currentTime の値を設定して特定の位置にジャンプすることもできます

コントロール: 表示または、ユーザー コントロール インターフェイスを非表示にします (再生、一時停止、ボリューム コントロールを追加するためのプロパティ)

volume: ボリューム値を 0.0 から 1.0 の間で設定するか、現在のボリューム値をクエリします

muted: ミュートするかどうかを設定します

読み取り- Only 属性 プロパティの説明

duration: Get メディア ファイルの再生期間 (秒単位)、取得できない場合は NaN になります

paused: メディア ファイルが一時停止されている場合は true を返し、それ以外の場合は false を返します

completed: メディア ファイルの再生が終了した場合は、true を返します

startTime: バッファリングされたメディア ファイルであり、コンテンツの一部がバッファ内に存在しない場合を除き、再生開始時間を返します (通常は 0.0)

error: エラー コードエラー発生後に返されます

currentSrc:

stringの形式で、ソース要素でブラウザによって選択されたファイルに対応する、再生またはロードされているファイルを返します

主要なブラウザはこれらの属性をサポートしています。ただし、オーディオ再生ストリームには互換性がないと考えないでください。 Firefox と Opera は ogg オーディオをサポートし、Safari と IE は mp3 をサポートします。幸いなことに、Google の Chrome はそれをサポートしています。技術的な実装としては、原理は比較的単純です。つまり、ネイティブ オーディオを非表示にし、p を使用してプレーヤーのエフェクトを表示し、そのクリック イベントを呼び出して再生と停止をトリガーし、この値は取得できる場合もあれば取得できない場合もあり少しわかりにくいので、このときコンポーネントが取得できない場合はaudioタグのduration属性の保存時間をカスタマイズすることをお勧めします。とするとこの値が得られます。

りー

以上がHTMLの