jQueryでタイマー作動後に音を鳴らしたい。

こちらのサイトを参考にして、タイマーの制作に挑戦しています。
HTMLからタイマーの秒数を拾い、アラートでタイマーの終了を表示する処理はできたのですが
音も鳴らしたいと思い、こちらのサイトを参考にしていますが、どのように組めばいいかわかりません。
https://programmer-jobs.blogspot.com/2009/05/amazing-jquery-examples.html
こちらで制作したものに組み込んで音を鳴らせるでしょうか？
どのように組めば鳴らせるでしょうか、ご教授いただければと思い投稿しました。

html

<div id="elapsed"></div>

    <div class="btn-group" role="group">
	<button type="button" class="btn btn-default" onclick="starttimer(120);">２分</button>
	<button type="button" class="btn btn-default"></button>
	<button type="button" class="btn btn-default"></button>
	<button type="button" class="btn btn-default"></button>
	<button type="button" class="btn btn-default"></button>
</div>

JavaScript

function starttimer(sec) {
  
  $(".btn-group button").prop("disabled", true);
  var startTime = new Date()
  
  var elapsedtime = 0;

    var timerId = setInterval(function() {
      // この中が1秒後に実行される
      var nowTime = new Date();
      elapsedtime = Math.round((nowTime - startTime) / 1000);
      $("#elapsed").html(elapsedtime);
      
      if (elapsedtime > sec) {
        
        clearInterval(timerId);
        
        $("#elapsed").html("");
        
        alert("タイマー終了");
        $(".btn-group button").prop("disabled", false);
      }
      elapsedtime++;
     }, 1000);
}

サイトのコード

$.sound.play("sample.wav");

$(function(){
    $("a[href$=.wav]").click(function() {
        $.sound.play(this.href);
        return false;
    });
});

m.ts10806

2018/07/11 12:57

最初のコードはhtmlでしょうか。半端な状態になっているのでなるべく全体を提示してください。

m.ts10806

2018/07/11 20:45

また「音を鳴らす」自体は実現できているんでしょうか？

twobass

2018/07/11 23:02

はい、最初のコードはhtmlです。簡易的に確認しようとも思いましたが、組み方が分からず「音を鳴らす」自体もできていません。

行動規範の内容に同意します

回答1件

__サイトのコード__はjqueryに正式に導入されていないコードらしい(よくわかりませんが)
ので、

をご覧ください。

そして

javascript

alert("タイマー終了");


書き換えてみてはいかがでしょうか。

(ご参考までに)
例えば、
パターン1:
`alert("タイマー終了");`の前に音を一回鳴らす

パターン2:
`alert("タイマー終了");`の前に音を鳴らすループを設定し、(setInterval)
後にループを解除する(clearInterval)
(上のようにすると、__alert__の**OK**を押すまで鳴り続ける)

---

一応の説明ですが

__サイトのコード__の
> ```javascript
> $.sound.play("sample.wav");
> ```

は、非同期(async) にhtmlファイルから読み込んで再生します。
そのとき、相対パスで読み込む(http://, https://, // で始まらない)場合は、
もちろんhtmlのパス基準です。

また、__サイトのコード__の
> ```javascript
> $(function(){
>     $("a[href$=.wav]").click(function() {
>         $.sound.play(this.href);
>         return false;
>     });
> });
> ```

は、

|||
|:--:|:--:|
|`$("a[href$=.wav]")`|**a**タグの**href**属性の内容が`.wav`で終わる|
||(つまり、リンク先が**wave**音源である)|
|`this.href`|`this`とはこの場合は上の`a`要素です|
||(つまり、さっきのコード(`$.sound.play("sample.wav");`)と同じ)|

の意味です。

投稿2018/08/22 09:18