如何同时更改多个音频源?

huangapple go评论81阅读模式
英文:

How can I change multiple audio sources at once?

问题

我想一键更改多个音频元素的多个源目录。

我试图制作一个小型的4轨播放器,其中有一首歌曲的列表,用户可以选择并听取所选歌曲的音轨。到目前为止,这是播放器的代码:

HTML:

<div class="list-of-songs">
  <button id="song1" onclick="playsong1()">歌曲1</button>
  <button id="song2" onclick="playsong2()">歌曲2</button>
  <button id="song3" onclick="playsong3()">歌曲3</button>
</div> 

<div class="multitrack__control-panel">
	<button id="pause" onclick="pause()"></button>
	<button id="play" onclick="play()"></button>
	<button id="stop" onclick="stop()"></button>
		
	<audio id="track1" class="stem" src="audio/song1track1.wav"></audio>
	<audio id="track2" class="stem" src="audio/song1track2.wav"></audio>
	<audio id="track3" class="stem" src="audio/song1track3.wav"></audio>
	<audio id="track4" class="stem" src="audio/song1track4.wav"></audio>
</div>

JS:

var track1 = document.getElementById("track1");
var track2 = document.getElementById("track2");
var track3 = document.getElementById("track3");
var track4 = document.getElementById("track4");

/* 播放 */

function play() {
    track1.play();
    track2.play();
    track3.play();
    track4.play();
}

/* 暂停 */

function pause() {
  track1.pause();
  track2.pause();
  track3.pause();
  track4.pause();
}

/* 停止 */

function stop() {
  track1.pause();
  track2.pause();
  track3.pause();
  track4.pause();
  track1.currentTime = 0;
  track2.currentTime = 0;
  track3.currentTime = 0;
  track4.currentTime = 0;
}

我是JavaScript初学者,所以不太知道如何同时更改所有音频源的代码。我认为使用按钮选择歌曲是不错的方法,但我也可以用HTML列表或类似的方法替代按钮。

英文:

I want to change with one click multiple source directories from multiple audio elements at once.

I'm trying to make a small 4-track player with a list of songs which one can choose from and listen to the stems of the selected song. This is the player so far:

HTML:

&lt;div class=&quot;list-of-songs&quot;&gt;
  &lt;button id=&quot;song1&quot; onclick=&quot;playsong1()&quot;&gt;Song 1&lt;/button&gt;
  &lt;button id=&quot;song2&quot; onclick=&quot;playsong2()&quot;&gt;Song 2&lt;/button&gt;
  &lt;button id=&quot;song3&quot; onclick=&quot;playsong3()&quot;&gt;Song 3&lt;/button&gt;
&lt;/div&gt; 

&lt;div class=&quot;multitrack__control-panel&quot;&gt;
	&lt;button id=&quot;pause&quot; onclick=&quot;pause()&quot;&gt;&lt;/button&gt;
	&lt;button id=&quot;play&quot; onclick=&quot;play()&quot;&gt;&lt;/button&gt;
	&lt;button id=&quot;stop&quot; onclick=&quot;stop()&quot;&gt;&lt;/button&gt;
		
	&lt;audio id=&quot;track1&quot; class=&quot;stem&quot; src=&quot;audio/song1track1.wav&quot;&gt;&lt;/audio&gt;
	&lt;audio id=&quot;track2&quot; class=&quot;stem&quot; src=&quot;audio/song1track2.wav&quot;&gt;&lt;/audio&gt;
	&lt;audio id=&quot;track3&quot; class=&quot;stem&quot; src=&quot;audio/song1track3.wav&quot;&gt;&lt;/audio&gt;
	&lt;audio id=&quot;track4&quot; class=&quot;stem&quot; src=&quot;audio/song1track4.wav&quot;&gt;&lt;/audio&gt;
&lt;/div&gt;

JS:

var track1 = document.getElementById(&quot;track1&quot;);
var track2 = document.getElementById(&quot;track2&quot;);
var track3 = document.getElementById(&quot;track3&quot;);
var track4 = document.getElementById(&quot;track4&quot;);

/* Play */

function play() {
    track1.play();
    track2.play();
    track3.play();
    track4.play();
}

/* Pause */

function pause() {
  track1.pause();
  track2.pause();
  track3.pause();
  track4.pause();
}

/* Stop */

function stop() {
  track1.pause();
  track2.pause();
  track3.pause();
  track4.pause();
  track1.currentTime = 0;
  track2.currentTime = 0;
  track3.currentTime = 0;
  track4.currentTime = 0;
}

I am Javascript beginner, so I don't really know how to start doing the code for changing all the audio sources at the same time. I thought that using buttons to select the songs is good, but I have no problem in replacing them with an HTML List or something similar.

答案1

得分: 1

If you want to change the source of an <audio>, just set the audio source in its src attribute:

document.getElementById("track1").src = "path/audio.mp3";

In this case, you can change all those <audio> sources at the same time using a loop:

const 
    sources = ["audio1.wav", "audio2.wav", "audio3.wav", "audio4.wav"],
    audioTags = document.querySelectorAll(".stem");

audioTags.forEach((audio, index) => audio.src = `audio/${sources[index]}`);

Basically, I just set every element in the sources array as the source of each <audio>. I don't know what you exactly want to do, but I think this could give you an idea of how to do it.

英文:

If you want to change the source of an &lt;audio&gt;, just set the audio source in its src attribute:

document.getElementById(&quot;track1&quot;).src = &quot;path/audio.mp3&quot;;

In this case, you can change all those &lt;audio&gt; sources at the same time using a loop:

const 
    sources = [&quot;audio1.wav&quot;, &quot;audio2.wav&quot;, &quot;audio3.wav&quot;, &quot;audio4.wav&quot;],
    audioTags = document.querySelectorAll(&quot;.stem&quot;);

audioTags.forEach((audio, index) =&gt; audio.src = `audio/${sources[index]}`);

Basically I just set every element in the sources array as the source of each &lt;audio&gt;. I don't know what are you exactly want to do, but I think this could give you an idea on how to do it.

huangapple
  • 本文由 发表于 2023年6月29日 12:56:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76578144.html
  • html
  • html5-audio
  • javascript
  • replace

如何使用` :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定