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

HTML5で同じサウンドを同時に複数回再生する方法を解説

HTML5で同じサウンドを同時に複数回再生するには？

HTML5の<audio>要素は、1つの要素につき同時に1つの再生しか行えません。そのため、同じサウンドを同時に複数回再生したい場合は、<audio>要素をクローン（複製）して使用する必要があります。以下の方法はGoogle Chromeで動作します。

実装コード例

var sound = document.getElementById("incomingMessageSound")
var sound2 = sound.cloneNode();
sound.play()
sound2.play()

cloneNodeメソッドの役割

cloneNodeメソッドは、呼び出し元のノードの複製を返すためのメソッドです。このメソッドを使うことで、元の<audio>要素とは独立した新しい要素が生成され、同じサウンドファイルを重ねて再生できるようになります。

活用のポイント

クローンした要素も元の要素と同様にplay()メソッドで再生できます。チャットアプリの通知音やゲームの効果音など、短時間に同じサウンドを何度も鳴らしたいシーンで特に有効なテクニックです。必要な同時再生数に応じて、cloneNode()を複数回呼び出すことでも対応可能です。

  1. MWC 2022のLenovo新製品まとめ：ゲーマーも学生も満足できる充実のラインナップ

    MWC 2022において、Lenovoは多彩な新製品を発表しました。ゲーマー向け、学生向け、そして外出先でも働くビジネスパーソン向けなど、さまざまなニーズに応えるデバイスが揃っています。どんな用途であっても、きっと自分に合った一台が見つかるはずです。この記事では、注目すべきLenovoの新製品を厳選してご紹介します。気に入るモデルに出会えれば、次のノートPCはLenovoで購入したくなるかもしれませんよ。IdeaPad Gaming 3i今回最も注目度の高い新製品のひとつが、ゲーミングノートPCの「IdeaPad Gaming 3i」です。32GBのRAM、Intel第12世代プロセッサーを搭

  2. Mouse without Bordersで3台以上のPCを1つのキーボードとマウスで同時に操作する方法

    複数のPCを効率よく操作したいなら、Microsoftが無料で提供するユーティリティ「Mouse without Borders」が非常に便利です。このソフトを使えば、1組のキーボードとマウスだけで最大4台のPCをシームレスに操作でき、物理的に機器を付け替える手間なく快適にタイピング作業を続けられます。さらに、テキストのコピー&ペーストはもちろん、PC間での小さなファイルの共有にも対応しているのが魅力です。Mouse without Bordersのインストール手順手順1. こちらのリンクからMicrosoft Garageのページにアクセスし、ソフトウェアのダウンロードとインストールを開始し