英文:
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:
<div class="list-of-songs">
<button id="song1" onclick="playsong1()">Song 1</button>
<button id="song2" onclick="playsong2()">Song 2</button>
<button id="song3" onclick="playsong3()">Song 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");
/* 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 <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 are you exactly want to do, but I think this could give you an idea on how to do it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论