5 files changed, 29 insertions, 27 deletions

diff --git a/index.html b/index.html
index 2a2880e..b69c787 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
         content="Morse Hero is a fun, interactive game to learn Morse code. Practice your skills with audio playback and visual hints to master Morse code quickly." />
     <meta name="keywords" content="morse code, morse code game, learn morse code, morse code practice, morse hero" />
     <meta name="robots" content="index, follow" />
-    <meta name="canonical" href="https://morsehero.com" />
+    <link rel="canonical" href="https://morsehero.com" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/ico/icon-192.png" />
diff --git a/package.json b/package.json
index 3ff284d..f207a44 100644
--- a/package.json
+++ b/package.json
@@ -28,4 +28,4 @@
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/chart/ChartEmbedPage.tsx b/src/pages/chart/ChartEmbedPage.tsx
index 4b485b7..2034f2c 100644
--- a/src/pages/chart/ChartEmbedPage.tsx
+++ b/src/pages/chart/ChartEmbedPage.tsx
@@ -18,19 +18,16 @@ const ChartEmbedPage = () => {
     viewportMeta.name = 'viewport';
     viewportMeta.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no';
     document.head.appendChild(viewportMeta);
-    
-    // Set canonical URL
-    const canonicalLink = document.createElement('link');
-    canonicalLink.rel = 'canonical';
-    canonicalLink.href = 'https://morsehero.com/charts/embed';
-    document.head.appendChild(canonicalLink);
-    
+
     // Set page title
     document.title = 'Morse Code Chart | Embed';
-    
+
     return () => {
-      document.head.removeChild(viewportMeta);
-      document.head.removeChild(canonicalLink);
+      // Remove viewport meta tag when component unmounts
+      const metaTag = document.querySelector('meta[name="viewport"]');
+      if (metaTag && metaTag.parentNode) {
+        metaTag.parentNode.removeChild(metaTag);
+      }
     };
   }, []);
 
diff --git a/src/pages/chart/ChartPage.tsx b/src/pages/chart/ChartPage.tsx
index 784aa0d..ffb679e 100644
--- a/src/pages/chart/ChartPage.tsx
+++ b/src/pages/chart/ChartPage.tsx
@@ -43,10 +43,18 @@ const ChartPage = () => {
         clickedItem.classList.add('playing');
       }
 
-      cw.play(character, {
-        wpm: 20,
-        actx: actxRef.current
-      });
+      try {
+        // Get Morse code for the character
+        const morseCode = getMorseCode(character);
+        
+        // Play the Morse code
+        window.cw.play(morseCode, {
+          wpm: 20,
+          actx: actxRef.current
+        });
+      } catch (error) {
+        console.error('Error playing Morse code:', error);
+      }
 
       // Remove the 'playing' class after the audio finishes
       setTimeout(() => {
diff --git a/src/pages/embed/EmbedPage.tsx b/src/pages/embed/EmbedPage.tsx
index c75a4f7..35417c0 100644
--- a/src/pages/embed/EmbedPage.tsx
+++ b/src/pages/embed/EmbedPage.tsx
@@ -3,26 +3,23 @@ import MorseGame from '../../components/MorseGame';
 import '../../styles.css';
 
 const EmbedPage = () => {
-  // Add meta tag for WebView compatibility
+  // Add meta tag for WebView compatibility and set page title
   useEffect(() => {
     // Set viewport for better mobile display
     const viewportMeta = document.createElement('meta');
     viewportMeta.name = 'viewport';
     viewportMeta.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no';
     document.head.appendChild(viewportMeta);
-    
-    // Set canonical URL
-    const canonicalLink = document.createElement('link');
-    canonicalLink.rel = 'canonical';
-    canonicalLink.href = 'https://morsehero.com/embed';
-    document.head.appendChild(canonicalLink);
-    
+
     // Set page title
     document.title = 'Morse Hero | Embed';
-    
+
     return () => {
-      document.head.removeChild(viewportMeta);
-      document.head.removeChild(canonicalLink);
+      // Remove viewport meta tag when component unmounts
+      const metaTag = document.querySelector('meta[name="viewport"]');
+      if (metaTag && metaTag.parentNode) {
+        metaTag.parentNode.removeChild(metaTag);
+      }
     };
   }, []);