Javascript功能和按钮

时间:2017-01-27 11:08:20

标签: javascript html

我想制作许多音乐按钮,但每次都要做新按钮和新音频。这是我的代码

的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>

我想要一个可以运行所有这些的单个音频和单个功能

1 个答案:

答案 0 :(得分:0)

如果我理解了你想要的东西,这里有一些JS可以让你更容易创建/播放/暂停音轨:

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');

你的按钮就像

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