{"id":542,"date":"2026-03-25T20:23:57","date_gmt":"2026-03-26T03:23:57","guid":{"rendered":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/?page_id=542"},"modified":"2026-04-02T06:37:28","modified_gmt":"2026-04-02T13:37:28","slug":"ai-short-story-player","status":"publish","type":"page","link":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/ai-short-story-player\/","title":{"rendered":"AI Short Story Player"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"542\" class=\"elementor elementor-542\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75b62c4 e-flex e-con-boxed e-con e-parent\" data-id=\"75b62c4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top&quot;:&quot;tilt&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M0,6V0h1000v100L0,6z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cab248c elementor-widget elementor-widget-heading\" data-id=\"cab248c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">AI Short Story Player<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6614c90 elementor-widget elementor-widget-text-editor\" data-id=\"6614c90\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Create a magical story with AI, then listen to it here with our story player!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8024785 elementor-align-left elementor-widget elementor-widget-button\" data-id=\"8024785\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.easemate.ai\/ai-story-generator\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click the button to create your AI story<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e093d8b e-con-full e-flex e-con e-child\" data-id=\"e093d8b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67c0909 elementor-widget elementor-widget-text-editor\" data-id=\"67c0909\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Paste your AI-generated story in the box below, then press Play to listen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-046a25a e-flex e-con-boxed e-con e-child\" data-id=\"046a25a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-279c87d elementor-widget elementor-widget-html\" data-id=\"279c87d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BOOK COVER PAGE -->\r\n<div id=\"coverPage\" style=\"\r\n  padding: 0 20px\r\n  margin:20px auto;\r\n  background:#EFE9AE;\r\n  text-align:center;\r\n  font-family:'Josefin Sans';\r\n\">\r\n  <h3 style=\"\r\n  font-size:36px; \r\n  font-family: 'Josefin Sans';\r\n  margin-bottom:20px;\"> BrightSprouts Storybook<\/h3>\r\n  <p style=\"\r\n  font-family:'Open Sans', sans-serif;\r\n  font-size:16px;\">Paste your story and begin your magical journey!<\/p>\r\n  <button id=\"startBtn\" style=\"\r\n    margin-top:20px;\r\n    padding:10px 12px;\r\n    background:#F08080;\r\n    color: white;\r\n    border:none;\r\n    font-size:18px;\r\n    font-weight:600;\r\n    cursor:pointer;\r\n    font-family:'Open Sans', sans-serif;\r\n  font-size:16px;\r\n  \">Start<\/button>\r\n<\/div>\r\n\r\n<!-- STORY PLAYER -->\r\n<div id=\"story-player\" style=\"display:none; max-width:700px; margin:20px auto; padding:20px; background:#F5FFC6;\">\r\n\r\n  <!-- Mascot -->\r\n  <div style=\"text-align:center; margin-bottom:20px;\">\r\n    <img decoding=\"async\" id=\"mascot\" src=\"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_3d-girl-character-give-a-thumb-up-with-cute-happy-face_35897862__2_-removebg-preview-1.png\" \r\n         style=\"width:120px; height:120px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,0.1);\">\r\n    <p style=\"font-size:18px; font-weight:600;\">I'm ready to read your story!<\/p>\r\n  <\/div>\r\n\r\n  <label for=\"storyInput\" style=\"font-weight:600; display:block; margin-bottom:8px;\">\r\n    Paste your story here\r\n  <\/label>\r\n\r\n  <textarea id=\"storyInput\" rows=\"10\" style=\"\r\n    width:100%;\r\n    padding:12px;\r\n    border:1px solid #ccc;\r\n    font-size:16px;\r\n    line-height:1.5;\r\n  \"><\/textarea>\r\n\r\n  <div style=\"margin-top:16px; display:flex; flex-wrap:wrap; gap:8px;\">\r\n    <button id=\"splitStoryBtn\" style=\"padding:10px 16px; background:#F08080; border:none; color:white; font-weight:600; cursor:pointer;\">\r\n      Prepare Story\r\n    <\/button>\r\n\r\n    <button id=\"autoPlayBtn\" style=\"padding:10px 16px; background:#F08080; border:none; color:white; font-weight:600; cursor:pointer;\">\r\n      Auto Play Story\r\n    <\/button>\r\n\r\n    <button id=\"stopBtn\" style=\"padding:10px 16px; background:#F08080; border:none; color:white; font-weight:600; cursor:pointer;\">\r\n      Stop\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <div id=\"pageIndicator\" style=\"margin-top:10px; font-weight:600; text-align:center;\"><\/div>\r\n\r\n  <div id=\"storyDisplay\" style=\"\r\n    margin-top:16px;\r\n    padding:40px;\r\n    background:#fff;\r\n    font-size:16px;\r\n    min-height:300px;\r\n    max-height:300px;\r\n    overflow-y:auto;\r\n    font-family: 'Open Sans', sans-serif;. \r\n    transition:opacity 0.4s ease;\r\n  \">\r\n    Your story pages will appear here after you click \"Prepare Story\".\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n.page-turn { opacity:0; }\r\n<\/style>\r\n\r\n<!-- Background Music -->\r\n<audio id=\"bgMusic\" loop>\r\n  <source src=\"https:\/\/cdn.pixabay.com\/download\/audio\/2022\/03\/15\/audio_7f5e2ad653.mp3?filename=soft-piano-ambient-110397.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n\r\n<script>\r\n(function() {\r\n  const coverPage = document.getElementById(\"coverPage\");\r\n  const startBtn = document.getElementById(\"startBtn\");\r\n  const storyPlayer = document.getElementById(\"story-player\");\r\n  const storyInput = document.getElementById(\"storyInput\");\r\n  const splitBtn = document.getElementById(\"splitStoryBtn\");\r\n  const autoPlayBtn = document.getElementById(\"autoPlayBtn\");\r\n  const stopBtn = document.getElementById(\"stopBtn\");\r\n  const storyDisplay = document.getElementById(\"storyDisplay\");\r\n  const pageIndicator = document.getElementById(\"pageIndicator\");\r\n  const mascot = document.getElementById(\"mascot\");\r\n  const bgMusic = document.getElementById(\"bgMusic\");\r\n\r\n  let pages = [];\r\n  let currentPageIndex = 0;\r\n  let autoPlaying = false;\r\n\r\n  startBtn.onclick = () => {\r\n    coverPage.style.display = \"none\";\r\n    storyPlayer.style.display = \"block\";\r\n    bgMusic.volume = 0.4;\r\n    bgMusic.play();\r\n  };\r\n\r\n  function updateDisplay() {\r\n    if (pages.length === 0) return;\r\n\r\n    storyDisplay.classList.add(\"page-turn\");\r\n\r\n    setTimeout(() => {\r\n      storyDisplay.classList.remove(\"page-turn\");\r\n      storyDisplay.textContent = pages[currentPageIndex];\r\n      pageIndicator.textContent = `Page ${currentPageIndex + 1} of ${pages.length}`;\r\n      storyDisplay.scrollTop = 0;\r\n    }, 200);\r\n  }\r\n\r\n  function splitStoryIntoPages(text) {\r\n    const rawParts = text.split(\/\\n\\s*\\n\/);\r\n    return rawParts.map(p => p.trim()).filter(p => p.length > 0);\r\n  }\r\n\r\n  function readPageAndAdvance() {\r\n    if (!autoPlaying) return;\r\n    if (currentPageIndex >= pages.length) {\r\n      autoPlaying = false;\r\n      mascot.src = \"https:\/\/media.tenor.com\/2roX3uxz_68AAAAi\/cute-cat.gif\";\r\n      return;\r\n    }\r\n\r\n    updateDisplay();\r\n\r\n    mascot.src = \"https:\/\/media.tenor.com\/0Wv1XQpYtN8AAAAi\/cat-reading.gif\";\r\n\r\n    const utter = new SpeechSynthesisUtterance(pages[currentPageIndex]);\r\n    utter.rate = 0.95;\r\n\r\n    utter.onend = function() {\r\n      if (!autoPlaying) return;\r\n\r\n      currentPageIndex++;\r\n\r\n      if (currentPageIndex < pages.length) {\r\n        readPageAndAdvance();\r\n      } else {\r\n        autoPlaying = false;\r\n        mascot.src = \"https:\/\/media.tenor.com\/2roX3uxz_68AAAAi\/cute-cat.gif\";\r\n      }\r\n    };\r\n\r\n    window.speechSynthesis.speak(utter);\r\n  }\r\n\r\n  splitBtn.onclick = () => {\r\n    const text = storyInput.value;\r\n    if (!text.trim()) {\r\n      alert(\"Please paste your story first.\");\r\n      return;\r\n    }\r\n    pages = splitStoryIntoPages(text);\r\n    currentPageIndex = 0;\r\n    updateDisplay();\r\n    window.speechSynthesis.cancel();\r\n  };\r\n\r\n  autoPlayBtn.onclick = () => {\r\n    if (pages.length === 0) {\r\n      alert(\"Prepare the story first.\");\r\n      return;\r\n    }\r\n    autoPlaying = true;\r\n    currentPageIndex = 0;\r\n    window.speechSynthesis.cancel();\r\n    readPageAndAdvance();\r\n  };\r\n\r\n  stopBtn.onclick = () => {\r\n    autoPlaying = false;\r\n    window.speechSynthesis.cancel();\r\n    mascot.src = \"https:\/\/media.tenor.com\/2roX3uxz_68AAAAi\/cute-cat.gif\";\r\n  };\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88401a6 elementor-widget elementor-widget-image\" data-id=\"88401a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_serene-vintage-happy-child-wearing-a-colorful-t-shirt-original_59932011-300x300.png\" class=\"attachment-medium size-medium wp-image-646\" alt=\"\" srcset=\"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_serene-vintage-happy-child-wearing-a-colorful-t-shirt-original_59932011-300x300.png 300w, https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_serene-vintage-happy-child-wearing-a-colorful-t-shirt-original_59932011-1024x1024.png 1024w, https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_serene-vintage-happy-child-wearing-a-colorful-t-shirt-original_59932011-150x150.png 150w, https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_serene-vintage-happy-child-wearing-a-colorful-t-shirt-original_59932011-768x768.png 768w, https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_serene-vintage-happy-child-wearing-a-colorful-t-shirt-original_59932011-1536x1536.png 1536w, https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-content\/uploads\/2026\/04\/vecteezy_serene-vintage-happy-child-wearing-a-colorful-t-shirt-original_59932011-2048x2048.png 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI Short Story Player Create a magical story with AI, then listen to it here with our story player! Click the button to create your AI story Paste your AI-generated story in the box below, then press Play to listen. BrightSprouts Storybook Paste your story and begin your magical journey! Start I&#8217;m ready to read [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-542","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages\/542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":70,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages\/542\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/pages\/542\/revisions\/664"}],"wp:attachment":[{"href":"https:\/\/dgl409.varanipanneersel.imgd.ca\/Project409\/wp-json\/wp\/v2\/media?parent=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}