【JavaScript】if文をつかって音楽を再生する方法を教えてください！

Question

前提・実現したいこと

こんにちは。いま、JavaScriptでアラームを作っており、特定の時刻になったときに音楽を流すようにプログラムしたいのですが、ネットにある音楽を再生する方法を片っ端から試してみても、私が思うように音楽は再生されませんでした。

そのため、if文をつかって（条件分岐で）どうやって音楽を流すのか（再生するのか）を教えていただきたいです。

該当のソースコード

    var dd = new Date();
    var hour = dd.getHours();
    
    function playSound() {
      audioElem = new Audio();
      audioElem.src = "alarm.mp3";
      audioElem.play();
    }

    if(hour==07){
      playSound();
    }

試したこと

htmlのaudioタグを使って音楽を再生する方法を試してみましたが、ほとんどのサイトにはonclick時に音楽を流すようなプログラムであるがif文を用いてでの再生方法は書かれていませんでした。

ちなみに、もしやと思って一回サイト通りにonclick時に再生するようにプログラムしたら流れましたので、おそらくファイルの選択ミスではありません。

Comments

[m.ts10806]

>わかりやすく説明しようとしなくても全然大丈夫です！！
拡大解釈すると「つまり理解する気はないが動くコードくれればそれでいい」と思えなくもありません。
理解されない回答をしようと思う人はあまりいませんし、要件とも関係ないのでこのような但し書きは一切不要と思います。

[prog.henry]

そんなことまでは考えていませんでした。貴重なご指摘をありがとうございます！

[m.ts10806]

適宜質問を編集してご対応ください

[miyabi_pudding]

if(hour==07){
playSound();
}
は、javascriptだと通りますが、
十進数で比較するなら、エラーの元になりますのでやめましょう。
0が余計です。
getHoursは、十進数の数値を返すメソッドなので。

Answer 1

1. ブラウザの実装によりますが、 <video> や <audio> といった要素は、ユーザーのアクション (再生ボタンクリック) を起因としていないと、再生できないようになっています。
2. 自動再生ができるブラウザであったとしても、audioElem.src = "alarm.mp3"; でファイル名を指定した直後ではまだファイルが読み込み終わっておらず、再生できない可能性があります。次のように、読み込みを待つ必要があります。

Audio() - Web API | MDN

function playSound() {
  audioElem = new Audio();
  audioElem.addEventListener('canplaythrough', () => {
    audioElem.play();
  });
  audioElem.src = "alarm.mp3";
}

同様に、あらかじめaudioElem自体は定義しておいて、クリックイベントを起点に再生する (クリックされた時点では読み込みが完了しているだろうと思われる) 場合においても、念の為、読み込みが終わっているかどうか確認したほうがよいです。

const audioElem = new Audio();
audioElem.addEventListener('click', evt => {
  if(audioElem.readyState !== HAVE_ENOUGH_DATA) {
    evt.preventDefault();
    return;
  }

  audioElem.play();
  evt.preventDefault();
})
document.body.appendChild(audioElem);

Answer 2

if文をつかって（条件分岐で）どうやって音楽を流すのか（再生するのか）

alert を作りたいということですので、必要な実装は次の通り。

1. 時間が来たら自動で再生開始
2. 繰り返し再生
3. 停止

if文は使いません
読み込み中の時間など非同期で実行される処理があるため、
条件分岐よりも Audio(HTMLAudioElement)に関連するイベントの変化を理解する必要があります。

ページを開いて ５秒後に鳴り始める例：
簡易実装です（再生を止めると、シーク位置を戻すなどの処理が必要ですが、未実装です）。

// ページを開いてから実行
window.addEventListener("load", function(){

  let audioElem;
  function playSound() {
    audioElem = new Audio( "alert.mp3" );
    audioElem.loop = true;
    audioElem.autoplay = true;
    audioElem.addEventListener("canplaythrough", function(){
      audioElem.play();
    });
  }

  // 時限実行で再生開始
  setTimeout( function(){
    playSound();
  }, 5000); // 5000msec == 5sec

  // 停止は割愛。 click イベントで audioElem.pause() 
});

ちなみにですが、setTimeout() もユーザ（プログラマ）が書いたアクションと思ってください。

※Chromium で動作確認。メジャーブラウザだと鳴らないそうです。