JavaScriptの二重再生を防止したい

Question

#前提・実現したいこと私は、JavaScriptとHTMLの音楽再生をするページを作っています。そこで、再生ボタンを何度も押せば、ずっと重なって音楽が再生できるということになってしまいます。なので、それを防止すべく、変数による制御を加えてみたのですが、なぜか今まで通り再生できてしまいます。 #コード JavaScriptとHTMLが混ざっています。 ``` TEST ``` #試したこと変数を使ってみる→なぜかできない。

Accepted Answer

```
方法1: 単純にイベントを解除する
```

[ここ](https://gray-code.com/javascript/unset-event-listener/)や[ここ](https://itsakura.com/javascript-removeeventlistener)を見ると
removeEventListenerを使って解除すばいいだけっぽいです。

```
方法2: 条件を付けて動かす
```

日本語で考えてみてください。(英語母語話者なら英語で、中国語母語話者なら中国語で……でもいいですが)

とにかく自分が解釈できる言語で単純に考えてみてください。

どういうときに動いて、どういうときに動きをキャンセルしますか?

```
どういうときに動いて -> 単純にボタンが押されたとき
どういうときに(動きを)キャンセルするか -> ???
```

どういうときにキャンセルするか、つまり「動くときと動かない時の違い」を考えるのです。

そう、「すでに再生ボタンが押されたとき」とかのようなものですね。

まだ再生ボタンが押されていない状態と、押された後の状態の二つが出てきます。

ということは、「押されたときの挙動」で、「状態を変える」べきですね。

押す前と押した後の二つの状態を見ればいいのです。

2値なので true/falseでもいいですね。

たとえば isClicked 変数を用意して、デフォルトではfalseに。

そして、ボタンが押されたとかの処理のときに、isClicked を trueにする。

そうすれば、「ボタンが押された( isClicked == true ) でないなら、処理する」とかみたいな事ができますね。

-----------------------

[追記1]

> なので、それを防止すべく、変数による制御を加えてみたのですが、なぜか今まで通り再生できてしまいます。

それはね。当たり前です。

コードを読んでみましょう。

コードを読むコツは『**一行レベルで、何をしているかを考えながら読む**』です。

とりま、読んでみましょう。

```
// 関数 startを定義
function start() {
    // started が undefined なら
    if (started == undefined){
        // started 変数を宣言
        var started;
        // 音楽を再生
        music.play();
        // 「[再生]」と表示
        console.log('[再生]');
        // started 変数を宣言し、"abc" をセット
        var started = "abc";
    }else{ // それ以外 (=> startがundefined以外) )　なら
　　　　 // 再生中
        aleat("再生中...");
    }
}
```

そして、これを疑似コードとして書きだしてみましょう。

```
1. startedがundefinedなら
   1.1. started変数を宣言
   1.2. 音楽を再生
   1.3. started変数を宣言し、"abc"をセット
2. それ以外なら
   2.1. 再生中
```

この疑似コードを、現実世界で手作業でシミュレーションしてみてください。

つまり、ホワイトボードかなんかを用意して、

```
ホワイトボードにある started とあるものを読んでundefinedかどうかを調べる
→ (まだ無いようだ)=> (undefinedである)
→ started == undefinedは満たす
→ started という名前のものをホワイトボードに書く

[started: ???]

→ 音楽を再生
→ さらに別のところに started: abc と書く。

[started: ???]
[started: abc]

→ また呼び出されたので startedがundifinedかどうか調べる
→ (適当なものを見る)
→ (undefinedだ)
→ startedを宣言

[started: ???]
[started: abc]
[started: ???]

...
```

のような感じでしょうか。

まあ、実際には最適化が行われると思いますが。

なんか、おかしくないですか?

(1)で調べているstartedはどこにあるのでしょうか。

で、仮にグローバル変数としてあるとしても、

(1.1) でさらにローカル変数としてstartedを宣言しています。

そうなると、次に(関数内で)startedにアクセスするときは ローカル変数にアクセスするはずです。
(関数から抜けた後なら別だろうけど)

つまり、(1) ≠ (1.1) です。

さらに (1.3)でstartedを宣言し、"abc"を入れています。

そうなると、別の変数として宣言しているはずです。
(ちなみに、C言語とかのような言語だとこの時点でエラー)

それに (1.1) ≠ (1.3) です。

おそらく、「別の変数として見なされている」可能性が高いです。

varを付けると、**宣言**で、「このブロックでしか使わないもの」という感じです。

Answer

BeatStarさんの助言を元に、以下のようにしたらできました。
最初に、```started = false;```と記述、
再生部分を以下のように変更
```JavaScript
function start() {
	if (started == false){
		started = true;
		music.play();
		console.log("[再生]");
	}else{
		alert("再生中...");
	}
}
```
変数は前まで1種類しかないと思っていました。
変数について、また勉強します。

Answer

変数のスコープをきちんと認識しましょう。
`started` 変数を `start` 関数の外で宣言しないと意味がないですよ。

```js
function start() {
  if (started == undefined) { // started はこれより前には宣言されてない
    var started;  // ここで初めて宣言されている
    music.play();
    console.log("[再生]");
    var started = "abc"; // { ... } の内部でのみ有効なので、 if でいくら確認しても undefined のまま
  } else {
    aleat("再生中..."); // スペルミス
  }
}
```

関連した質問