feat: not auto play music, add watermark

index.html

@@ -9,14 +9,14 @@
 </head>
 <body class="bg-pink-50">
     <div class="music-controls">
-        <audio id="backgroundMusic" autoplay loop>
+        <audio id="backgroundMusic" loop>
             <source src="until-you.mp3" type="audio/mp3">
         </audio>
         <audio id="successMusic">
             <source src="i-do.mp3" type="audio/mp3">
         </audio>
         <button id="toggleMusic" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full text-sm md:text-base">
-            🎵 Tạm dừng
+            🎵 Phát nhạc
         </button>
     </div>
 
@@ -66,5 +66,8 @@
     </div>
 
     <script src="script.js"></script>
+    <div class="watermark text-center text-gray-500 text-xs mt-4">
+        Created by <a href="https://miti99.dev" target="_blank" class="text-pink-500">miti99</a> with &hearts;
+    </div>
 </body>
 </html>

script.js

@@ -59,25 +59,8 @@ const playNewMusic = async (music) => {
 };
 
 const initializeAudio = async () => {
-    try {
-        backgroundMusic.volume = 0;
-        await backgroundMusic.play();
-        isMusicPlaying = true;
-        toggleButton.textContent = '🎵 Tạm dừng';
-
-        const fadeInInterval = setInterval(() => {
-            if (backgroundMusic.volume < 0.9) {
-                backgroundMusic.volume += 0.1;
-            } else {
-                clearInterval(fadeInInterval);
-                backgroundMusic.volume = 1.0;
-            }
-        }, 100);
-    } catch (error) {
-        console.log('Autoplay prevented:', error);
-        isMusicPlaying = false;
-        toggleButton.textContent = '🎵 Phát nhạc';
-    }
+    isMusicPlaying = false;
+    toggleButton.textContent = '🎵 Phát nhạc';
 };
 
 window.addEventListener('DOMContentLoaded', initializeAudio);
@@ -94,7 +77,7 @@ document.addEventListener('visibilitychange', () => {
     }
 });
 
-toggleButton.addEventListener('click', () => {
+toggleButton.addEventListener('click', async () => {
     if (isMusicPlaying) {
         if (isSuccessScreen) {
             successMusic.pause();
@@ -104,9 +87,9 @@ toggleButton.addEventListener('click', () => {
         toggleButton.textContent = '🎵 Phát nhạc';
     } else {
         if (isSuccessScreen) {
-            successMusic.play();
+            await successMusic.play();
         } else {
-            backgroundMusic.play();
+            await backgroundMusic.play();
         }
         toggleButton.textContent = '🎵 Tạm dừng';
     }

styles.css

@@ -88,6 +88,15 @@
   display: none;
 }
 
+.watermark {
+  position: fixed;
+  bottom: 10px;
+  width: 100%;
+  text-align: center;
+  font-size: 0.75rem;
+  color: #888;
+}
+
 @media (max-width: 640px) {
   .music-controls {
       bottom: 10px;