<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #1f1f1f; /* Dark background color */
color: #fff; /* Text color */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#audio-container {
display: flex;
flex-direction: column;
align-items: center;
}
audio {
width: 300px;
margin: 10px;
}
button {
background-color: #4CAF50; /* Green button color */
color: white;
padding: 150px 200px; /* Adjusted padding for larger size */
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px; /* Adjusted margin */
font-size: 16px; /* Adjusted font size */
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="audio-container">
<audio id="audio1" controls>
Your browser does not support the audio element.
</audio>
<input type="file" id="fileInput1" accept="audio/mp3" onchange="loadAudio('audio1', 'fileInput1')">
<button onclick="toggleAudio('audio1', 'audio2')">Toggle Audio 1</button>
<audio id="audio2" controls>
Your browser does not support the audio element.
</audio>
<input type="file" id="fileInput2" accept="audio/mp3" onchange="loadAudio('audio2', 'fileInput2')">
<button onclick="toggleAudio('audio2', 'audio1')">Toggle Audio 2</button>
</div>
<script>
function toggleAudio(audioId, otherAudioId) {
var audio = document.getElementById(audioId);
var otherAudio = document.getElementById(otherAudioId);
if (audio.paused) {
audio.play();
otherAudio.pause();
} else {
audio.pause();
}
}
function loadAudio(audioId, fileInputId) {
var audio = document.getElementById(audioId);
var fileInput = document.getElementById(fileInputId);
var file = fileInput.files[0];
var objectURL = URL.createObjectURL(file);
audio.src = objectURL;
}
</script>
</body>
</html>