Javascript功能和按钮

Question

i want to make many music buttons but everytime doing new buttons and new audio.this is my code

javascript

audio = new Audio();

audio.src = "music/examples.mp3"
audio.loop = false;

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

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

var audio2 = new Audio();
audio2.src = "music/examples1.mp3"
audio2.loop = false;

function play2() {
  audio2.play();
}

function pause2() {
  audio2.pause();
}

html

<button onclick="play1()"></button>
<button onclick="pause1()"><i class="fa fa-pause-circle" style="color: #848484"></i>
</button>
</i> -examples1
<br>

<button onclick="play2()"></button>
<button onclick="pause2()"><i class="fa fa-pause-circle" style="color: #848484"></i>
</button>
</i> examples
<br>

<button onclick="play3()"></button>
<button onclick="pause3()"><i class="fa fa-pause-circle" style="color: #848484"></i>
</button>
</i> -examples3
<br>

I want a single audio and single fonction that will run all of them

Answer 1

If I understood what you wanted correctly, here's some JS that makes it simpler to create/play/pause audio tracks:

var audios = {};

function makeAudio(key, src) {
  var newAudio = new Audio();
  newAudio.src = src;
  newAudio.loop = false;
  audios[key] = newAudio;
}

function pause(key) {
  audios[key].pause();
}

function play(key) {
  audios[key].play();
}

makeAudio(1, 'music/examples.mp3');
makeAudio(2, 'music/examples1.mp3');

And your buttons would be like

<button onclick="play(1)"></button>
<button onclick="pause(1)"><i class="fa fa-pause-circle" style="color: #848484"></i></button></i> -examples1<br>