Audio Social Media Profile body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .profile-container { max-width: 800px; margin: 50px auto; background-color: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); text-align: center; } .custom-play-button { background-color: #1d72b8; color: white; border: none; padding: 15px 30px; font-size: 18px; border-radius: 50%; cursor: pointer; outline: none; transition: background-color 0.3s ease; } .custom-play-button:hover { background-color: #155a91; } .custom-play-button:active { background-color: #104973; } audio { display: none; /* Hides default controls */ } .profile-name { font-size: 2em; margin: 10px 0; } .profile-bio { font-size: 1.2em; color: #555; } .audio-posts { margin-top: 30px; } .audio-item { margin: 10px 0; background-color: #f9f9f9; padding: 10px; border-radius: 5px; } .audio-item audio { width: 100%; } // Get the profile audio element and play button const profileAudio = document.getElementById(‘profileAudio’); const playButton = document.getElementById(‘playButton’); // Play or pause audio when button is clicked playButton.addEventListener(‘click’, function() { if (profileAudio.paused) { profileAudio.play(); playButton.textContent = ‘⏸️’; // Change button to pause symbol } else { profileAudio.pause(); playButton.textContent = ‘▶️’; // Change button to play symbol } });