|
Trizzl3y
1 month ago |
!DOCTYPE html><
<html>
<head>
<title>Multi-Track
Audio Player</title
>
<
style>
body {
font-family: sans
-serif;
display: flex;
flex-direction: c
olumn;
align-items: cent
er;
padding: 20px;
}
.track-container {
margin-bottom: 10
px;
border: 1px solid
#ccc;
padding: 10px;
border-radius: 5p
x;
width: 400px; /*
Adjust width as nee
ded */
}
audio {
width: 100%;
}
input[type="file"]
{
margin-top: 5px;
}
#playlist {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Multi-Track Aud
io Player</h1>
<div id="track-inpu
ts">
<!-- Initial trac
k input -->
<div class="track
-container">
<audio controls
></audio>
<input type="fi
le" accept="audio/
*" onchange="loadT
rack(this)">
</div>
</div>
<button onclick="ad
dTrack()">Add Track
</button>
<div id="playlist">
<h2>Playlist</h2>
<!-- Playlist wil
l be dynamically
populated here -->
</div>
<script>
function loadTrack(
input) {
const file = inpu
t.files[0];
const audio = inp
ut.parentNode.qu
erySelector('audio
');
if (file) {
const reader =
new FileReader();
reader.onload =
function(e) {
audio.src = e
.target.result;
audio.load();
// Important: Refr
esh the audio e
lement
}
reader.readAsDa
taURL(file);
// Add the trac
k to the playlist
addToPlaylist(f
ile.name, audio);
}
}
function addTrack()
{
const trackInputs
= document.getElem
entById('track-
inputs');
const newTrackDiv
= document.createE
lement('div');
newTrackDiv.class
List.add('track-
container');
newTrackDiv.inner
HTML = `
<audio controls
></audio>
<input type="fi
le" accept="audio/
*" onchange="loadT
rack(this)">
`;
trackInputs.appen
dChild(newTrackDiv
);
}
function addToPlayl
ist(trackName,
audioElement) {
const playlistDiv
= document.getElem
entById('playlist
');
const playlistIte
m = document.
createElement('p');
const playButton
= document.createEl
ement('button');
playButton.textCo
ntent = "Play";
playButton.addEve
ntListener('click',
function() {
// Pause all ot
her tracks before
playing this one
const allAudioE
lements = document.
querySelectorAll('a
udio');
allAudioElement
s.forEach(audio =>
{
if (audio !==
audioElement) {
audio.pause
();
}
});
audioElement.pl
ay();
});
playlistItem.text
Content = trackName
+ " ";
playlistItem.appe
ndChild(playButton
);
playlistDiv.appen
dChild(playlistItem
);
}
</script>
</body>
</html>
<html>
<head>
<title>Multi-Track
Audio Player</title
>
<
style>
body {
font-family: sans
-serif;
display: flex;
flex-direction: c
olumn;
align-items: cent
er;
padding: 20px;
}
.track-container {
margin-bottom: 10
px;
border: 1px solid
#ccc;
padding: 10px;
border-radius: 5p
x;
width: 400px; /*
Adjust width as nee
ded */
}
audio {
width: 100%;
}
input[type="file"]
{
margin-top: 5px;
}
#playlist {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Multi-Track Aud
io Player</h1>
<div id="track-inpu
ts">
<!-- Initial trac
k input -->
<div class="track
-container">
<audio controls
></audio>
<input type="fi
le" accept="audio/
*" onchange="loadT
rack(this)">
</div>
</div>
<button onclick="ad
dTrack()">Add Track
</button>
<div id="playlist">
<h2>Playlist</h2>
<!-- Playlist wil
l be dynamically
populated here -->
</div>
<script>
function loadTrack(
input) {
const file = inpu
t.files[0];
const audio = inp
ut.parentNode.qu
erySelector('audio
');
if (file) {
const reader =
new FileReader();
reader.onload =
function(e) {
audio.src = e
.target.result;
audio.load();
// Important: Refr
esh the audio e
lement
}
reader.readAsDa
taURL(file);
// Add the trac
k to the playlist
addToPlaylist(f
ile.name, audio);
}
}
function addTrack()
{
const trackInputs
= document.getElem
entById('track-
inputs');
const newTrackDiv
= document.createE
lement('div');
newTrackDiv.class
List.add('track-
container');
newTrackDiv.inner
HTML = `
<audio controls
></audio>
<input type="fi
le" accept="audio/
*" onchange="loadT
rack(this)">
`;
trackInputs.appen
dChild(newTrackDiv
);
}
function addToPlayl
ist(trackName,
audioElement) {
const playlistDiv
= document.getElem
entById('playlist
');
const playlistIte
m = document.
createElement('p');
const playButton
= document.createEl
ement('button');
playButton.textCo
ntent = "Play";
playButton.addEve
ntListener('click',
function() {
// Pause all ot
her tracks before
playing this one
const allAudioE
lements = document.
querySelectorAll('a
udio');
allAudioElement
s.forEach(audio =>
{
if (audio !==
audioElement) {
audio.pause
();
}
});
audioElement.pl
ay();
});
playlistItem.text
Content = trackName
+ " ";
playlistItem.appe
ndChild(playButton
);
playlistDiv.appen
dChild(playlistItem
);
}
</script>
</body>
</html>
13 views
5
1
1
Comments 
