HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMオーディオオブジェクト

HTML DOMオーディオオブジェクトは、HTMLの

プロパティ

以下は、HTMLDOMオーディオオブジェクトのプロパティです-

プロパティ 説明
audioTracks 使用可能なオーディオトラックを含むaudioTrackListオブジェクトを返すには
自動再生 オーディオを返すか、自動的に再生を開始するように設定します。
バッファリング オーディオのバッファリングされたすべての部分を含むTimeRangesオブジェクトを返すため。
コントローラー オーディオの現在のメディアコントローラーを表すMediaControllerオブジェクトを返します。
コントロール オーディオの再生/一時停止コントロールを表示するかどうかを設定または返すには
crossOrigin オーディオのCORS設定を設定または返すには
currentSrc 現在再生中のオーディオのURLを返します。
currentTime 現在の再生位置を設定または戻す（秒単位）。
defaultMuted デフォルトでオーディオをミュートするかどうかを設定または返します
defaultPlaybackRate オーディオのデフォルトの再生速度を設定または返す<​​/td>
期間 音声の長さを秒単位で返します。
終了 再生が終了したかどうかを返すため。
エラー オーディオのエラー状態を表すMedioErrorタイプのオブジェクトを返すため。
ループ 終了後にオーディオの再生を再開するかどうかを設定または返すには
mediaGroup オーディオが含まれるメディアグループ名を設定または返すには。
ミュート オーディオをオフにするかどうかを設定または返すには。
networkState オーディオの現在のネットワーク状態を返すには
一時停止 音声を一時停止するかどうかを設定または返すため。
playingRate オーディオの再生速度を設定または返すため。
再生 オーディオの再生部分を表すTimeRangesオブジェクトタイプのオブジェクトを返すため。
プリロード オーディオのプリロード属性を設定または返すため。
readyState オーディオの現在の準備完了状態を返すため。
シーカブル オーディオのシーク可能な部分を表すTimeRangesオブジェクトを返すには
探している ユーザーが現在オーディオを探しているかどうかを返すには
src オーディオのsrc属性の値を設定または返すには
textTracks 使用可能なすべてのテキストトラックを表すTextTrackListオブジェクトを返すには
ボリューム オーディオの音量を設定または返すため。

メソッド

オーディオオブジェクトのメソッドは次のとおりです-

メソッド 説明
addTextTrack（） 指定されたオーディオに新しいテキストトラックを追加します。
canPlayType（） ブラウザが指定されたオーディオタイプを再生できるかどうかを確認します。
fastSeek（） オーディオプレーヤーで指定された時間にシークする/
getStartDate（） 現在のタイムラインオフセットを表す新しいDateオブジェクトを返します。
load（） オーディオ要素を再ロードします。
play（） オーディオの再生を開始します。
pause（） 現在再生中のオーディオを一時停止します。

構文

以下は、-

の構文です。

オーディオ要素の作成

var x= document.createElement("AUDIO")

オーディオ要素へのアクセス

var x = document.getElementById("demoAudio")

例

オーディオオブジェクトの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>MUSIC</h1>
<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>
<p>Click the button to get the duration of the audio, in seconds.</p>
<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>
<p id="SAMPLE"></p>
<script>
   function AudioDur() {
      var x = document.getElementById("Audio").duration;
      document.getElementById("SAMPLE").innerHTML = x;
   }
   function CreateAudio() {
      var x = document.createElement("AUDIO");
      x.setAttribute("src","sample1.mp3");
      x.setAttribute("controls", "controls");
      document.body.appendChild(x);
   }
</script>
</body>
</html>

出力

次の出力が生成されます-

HTMLDOMオーディオオブジェクト

「期間」をクリックすると-

HTMLDOMオーディオオブジェクト

[作成]-

をクリックすると

HTMLDOMオーディオオブジェクト

上記の例では-

最初にオーディオ要素を作成し、オーディオソースとタイプを指定しました。

<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>

次に、「Duration」ボタンと「CREATE」ボタンの2つを作成して、それぞれ関数AudioDur（）とCreateAudio（）を実行しました。

<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>

AudioDur（）関数は、IDが「Audio」に関連付けられている要素を取得します。 

function AudioDur() {
   var x = document.getElementById("Audio").duration;
   document.getElementById("SAMPLE").innerHTML = x;
}

CreateAudio（）関数は、オーディオ要素を作成し、srcなどの属性を「sample1.mp3」に設定し、「controls」属性を設定してそのコントロールを有効にします。次に、appendChild（）メソッドを使用して要素が本文に追加されます。

function CreateAudio() {
   var x = document.createElement("AUDIO");
   x.setAttribute("src","sample1.mp3");
   x.setAttribute("controls", "controls");
   document.body.appendChild(x);
}

  1. HTMLDOMHRオブジェクト

    HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #fff;    

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE