HTML5 Audio タグを使用して WEB オーディオ player_html/css_WEB-ITnose を作成する-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5 Audio タグを使用して WEB オーディオ player_html/css_WEB-ITnose を作成する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

現在、Web ページ上でオーディオファイルを再生する標準的な方法はなく、ほとんどのオーディオファイルはプラグインを使用して再生されており、多くのブラウザは異なるプラグインを使用しています。 HTML5 の登場により、Web でオーディオファイルを再生するための標準的な方法が提供され、Adobe Flash、Apple QuickTime、その他の再生プラグインなどのブラウザをアップグレードする必要がなくなり、最新のブラウザを使用するだけで聴くことができます。サウンド WEB ウェブサイトに出力できます。

WEB の Audio タグ

HTML5 は、Web ページにオーディオファイルを挿入する標準的な方法を指定する新しい要素、

Property	Value	Description
autoplay	true \| false	trueの場合、オーディオは準備が整うとすぐに再生されます。
controls	true \| false	true の場合、再生ボタンなどのコントロールがユーザーに表示されます。
end	数値	オーディオストリーム内のどこでプレーヤーが再生を停止するかを定義します。デフォルトでは、サウンドは最後まで再生されます。
loopend	数値	オーディオストリーム内でループ再生が停止する位置を定義します。デフォルトは end 属性の値です。
loopstart	数値	オーディオストリーム内のループ再生の開始位置を定義します。デフォルトは start 属性の値です。
playcount	数値	オーディオクリップが再生される回数を定義します。デフォルトは 1 です。
src	url	再生されているオーディオの URL。
start	数値	プレーヤーが再生を開始するオーディオストリーム内の位置を定義します。デフォルトでは、サウンドは最初に再生されます。

現在 audio タグをサポートしているブラウザは次のとおりです:

IE9、Firefox、Opera、Chrome、Safari はすべて

注: IE8 以前のバージョンは

オーディオの使用方法

HTML5 でオーディオを再生するには、本文に次のコードを挿入する必要があります:

タグの間にテキストコンテンツを挿入します。
なぜ auto に 3 つのソースタグが含まれるのか疑問に思うかもしれません。これは、ブラウザとオーディオ形式の互換性のためのものであり、すべてのブラウザの製造元が特定のオーディオファイル形式の使用に同意しているわけではありません。たとえば、Chrome、Internet Explorer 9 (IE9)、および Safari ブラウザは、非圧縮形式を使用する減少傾向の標準である WAV ファイルをサポートしていません。各ビデオファイル名を個別のタグに置き、オーディオコンテナ内のすべてのソースタグは、以下に示すようにで構成されます。そうすれば、訪問者がどのブラウザを使用していても、最初に読み取ったファイルの種類が自動的に選択され、サウンドが再生されます。 ...

サポートされていない

サポートされているサポートされていない

さらに、オーディオ空間はブラウザーによって見え方が異なります。

HTML5 を使用すると、開発者は大規模な WEB エクスペリエンスを簡単に提供できるようになります。

ダウンロードアドレス

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles