複数の音源を一つのページに掲載したい場合

Question

前提・実現したいこと

同じページ内に複数のボタンを設置して、JavaScriptでaudioタグを使いAのボタンを押せばAの音楽、Bのボタンを押せばBの音楽が再生されるようにしたいです。どのようにして振り分ければ良いでしょうか。

発生している問題・エラーメッセージ

AとBのボタンがありどちらを押しても同じ音源しか再生されません。

該当のソースコード

var audio = new Audio();
audio.src = 'musuic01.wav';

function play() {  
    audio.play();
}
function pause() {
   audio.pause();
}

var audio = new Audio();
audio.src = 'papye.wav';

function play() {  
    audio.play();
}
function pause() {
   audio.pause();
}

試したこと

タグに数字を振ったりしましたが反映されませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

変数名や関数名が同じになっています。
musuic01.wav向けの変数名や関数名、papye.wav向けの変数名や関数名をそれぞれ分けて用意して、
ボタンA、Bのonclickでそれぞれ別な関数を呼ぶようにしてください。

本当に名前だけを変更するなら一例ですが、以下でどうですか。

var music1_audio = new Audio();
music1_audio.src = 'musuic01.wav';

function music1_play() {  
    music1_audio.play();
}
function music1_pause() {
   music1_audio.pause();
}

var papye_audio = new Audio();
papye_audio.src = 'papye.wav';

function papye_play() {  
    papye_audio.play();
}
function papye_pause() {
   papye_audio.pause();
}

本当はおなじような動作をする関数はまとめたい、varをつかってほしくない、変数はなるべく閉じてほしい、、、、など気になるところは多々あるのですが、まずは手っ取り早い方法です。

Comments

[rulescanna]

ご回答ありがとうございます。
変数や関数の書き分けが出来ていない事は理解しているのですが、具体的にどのように書き分ければ良いのでしょうか？

[NGW]

本当に名前だけを変更するなら一例ですが、以下でどうですか。
``` JavaScript
var music1_audio = new Audio();
music1_audio.src = 'musuic01.wav';

function music1_play() {
music1_audio.play();
}
function music1_pause() {
music1_audio.pause();
}

var papye_audio = new Audio();
papye_audio.src = 'papye.wav';

function papye_play() {
papye_audio.play();
}
function papye_pause() {
papye_audio.pause();
}
```
本当はおなじような動作をする関数はまとめたい、varをつかってほしくない、変数はなるべく閉じてほしい、、、、など気になるところは多々あるのですが、まずは手っ取り早い方法です。

[m.ts10806]

NGWさん
コード提示されるなら回答編集されては。

[NGW]

ご指摘ありがとうございます。

[rulescanna]

コード例ありがとうございます。反映されました。
その他のご指摘もありがとうございます。関数のまとめ方は自分で調べてみます。
varに関してはletかconstを使った方が良いという事でしょうか？

[NGW]

解決できたようでよかったです。
varに関しては、以下のQiita記事やその他ネットの情報を参考にしてみてください。
https://qiita.com/taiju_suzuki/items/49ed558bd837452353b8