html Asitis.biz | Vocal Muscle Memory Engine

ASITIS.BIZ

High-Yield Native Audio Simulation Loops

10 Lessons v2.0

Asitis Engine

Core system matrix initialized.

Control Matrix

Spar Mode

V. Train Loops

10 active training modules

Lesson 1 A1 Level

Hawker Stall

Nanyang ordering dialogue

🍜 Hawker
"Hello! What would you like to eat today? We have chicken rice, noodles, and fried kway teow."
👨‍🏫 Coach
"Listen to the hawker's question. Your response should be: 'I would like chicken rice please.'"
🎤 Learner
"I would like chicken rice please."
🍜 Hawker
"Good choice! Would you like soup or dry?"
Lesson 2 A1 Level

Airport Check-In

Airline counter dialogue

✈️ Agent
"Good morning. Can I see your passport and ticket please?"
👨‍🏫 Coach
"The agent asks for your documents. Respond with: 'Yes, here you go.'"
🎤 Learner
"Yes, here you go."
✈️ Agent
"Thank you. Are you checking any bags today?"
Lesson 3 A2 Level

Taxi Navigation

Urban route directions

🚕 Driver
"Where are you heading to?"
👨‍🏫 Coach
"Tell the driver your destination: 'I need to go to Marina Bay Sands.'"
🎤 Learner
"I need to go to Marina Bay Sands."
🚕 Driver
"Got it. That's about 15 minutes from here."
Lesson 4 B2 Level

Business Meeting

Corporate discussion

💼 Manager
"Let's discuss the Q3 projections. Any thoughts on our targets?"
👨‍🏫 Coach
"Respond with a suggestion: 'I think we should aim for 15% growth.'"
🎤 Learner
"I think we should aim for 15% growth this quarter."
💼 Manager
"That's ambitious. What's your strategy to achieve that?"
Lesson 5 A2 Level

Hotel Front Desk

Concierge check-in

🏨 Receptionist
"Welcome to the Grand Hotel. Do you have a reservation?"
👨‍🏫 Coach
"Confirm your reservation: 'Yes, I have a reservation under Smith.'"
🎤 Learner
"Yes, I have a reservation under Smith."
🏨 Receptionist
"Perfect. I have you down for 3 nights. How will you be paying?"
Lesson 6 A1 Level

Local Market

Produce haggling

🧺 Vendor
"Fresh mangoes! Only 5 dollars per kilo. Very sweet!"
👨‍🏫 Coach
"Ask about the price: 'How much is that?'"
🎤 Learner
"How much is that?"
🧺 Vendor
"For you, special price. 4 dollars!"
Lesson 7 A2 Level

Transit Platform

Ticket booking

🚆 Ticket Agent
"Which train are you taking to Kuala Lumpur?"
👨‍🏫 Coach
"Tell the agent: 'I'm taking the 3 PM express train.'"
🎤 Learner
"I'm taking the 3 PM express train."
🚆 Ticket Agent
"That's 45 ringgit. Here's your ticket."
Lesson 8 A1 Level

Boutique Cafe

Coffee ordering

☕ Barista
"Welcome! What can I get for you today?"
👨‍🏫 Coach
"Order your coffee: 'I'd like a flat white, please.'"
🎤 Learner
"I'd like a flat white, please."
☕ Barista
"Would you like anything to eat with that?"
Lesson 9 B1 Level

City Landmarks

Pedestrian navigation

🗺️ Tourist
"Excuse me, is the museum near here?"
👨‍🏫 Coach
"Give directions: 'Yes, it's just two blocks north.'"
🎤 Learner
"Yes, it's just two blocks north of here."
🗺️ Tourist
"Thank you very much for your help!"
Lesson 10 A2 Level

Restaurant Booking

Reservation dialogue

🍽️ Host
"Good evening. Do you have a reservation?"
👨‍🏫 Coach
"Confirm your booking: 'Yes, we have a table for two at 7 PM.'"
🎤 Learner
"Yes, we have a table for two at 7 PM."
🍽️ Host
"Right this way. Enjoy your meal!"
10 Lessons Overview Lesson Topic Level Dialogue 01 Hawker Stall A1 Ordering chicken rice at a Singapore hawker centre 02 Airport Check-In A1 Checking in luggage and presenting passport 03 Taxi Navigation A2 Giving directions to Marina Bay Sands 04 Business Meeting B2 Discussing Q3 growth targets 05 Hotel Front Desk A2 Checking into a hotel reservation 06 Local Market A1 Haggling for mangoes at a wet market 07 Transit Platform A2 Buying train tickets to Kuala Lumpur 08 Boutique Cafe A1 Ordering a flat white coffee 09 City Landmarks B1 Giving directions to a museum 10 Restaurant Booking A2 Making a dinner reservation Audio Files Needed You'll need to create these MP3 files (40 files total): text g01_hawker_turn1.mp3 g01_coach_turn1.mp3 g01_learner_turn1.mp3 g01_hawker_response.mp3 g02_agent_turn1.mp3 g02_coach_turn1.mp3 g02_learner_turn1.mp3 g02_agent_response.mp3 g03_driver_turn1.mp3 g03_coach_turn1.mp3 g03_learner_turn1.mp3 g03_driver_response.mp3 g04_manager_turn1.mp3 g04_coach_turn1.mp3 g04_learner_turn1.mp3 g04_manager_response.mp3 g05_receptionist_turn1.mp3 g05_coach_turn1.mp3 g05_learner_turn1.mp3 g05_receptionist_response.mp3 g06_vendor_turn1.mp3 g06_coach_turn1.mp3 g06_learner_turn1.mp3 g06_vendor_response.mp3 g07_agent_turn1.mp3 g07_coach_turn1.mp3 g07_learner_turn1.mp3 g07_agent_response.mp3 g08_barista_turn1.mp3 g08_coach_turn1.mp3 g08_learner_turn1.mp3 g08_barista_response.mp3 g09_tourist_turn1.mp3 g09_coach_turn1.mp3 g09_learner_turn1.mp3 g09_tourist_response.mp3 g10_host_turn1.mp3 g10_coach_turn1.mp3 g10_learner_turn1.mp3 g10_host_response.mp3 bell.mp3 Features Full dialogue sequences for all 10 lessons Spatial audio with panning effects Spar Mode - skips the coach for faster practice Visual indicators - mic ON pulse, responding animation Level tags - A1, A2, B1, B2 Responsive design - works on mobile and desktop Please list what I am suppose to do leading to testing the site lesson 1 Step-by-Step Guide to Test Lesson 1 1. Create Your Audio Files You need 4 audio files for Lesson 1 (Hawker Stall). Record or generate these MP3 files: File Name Speaker Dialogue Text g01_hawker_turn1.mp3 🍜 Hawker "Hello! What would you like to eat today? We have chicken rice, noodles, and fried kway teow." g01_coach_turn1.mp3 👨‍🏫 Coach "Listen to the hawker's question. Your response should be: 'I would like chicken rice please.'" g01_learner_turn1.mp3 🎤 Learner "I would like chicken rice please." g01_hawker_response.mp3 🍜 Hawker "Good choice! Would you like soup or dry?" bell.mp3 Bell A short bell/chime sound (optional, for notification) 2. Set Up Your Project Folder Create a folder structure like this: text your-project-folder/ ├── index.html (the HTML file I provided) ├── audio/ │ ├── g01_hawker_turn1.mp3 │ ├── g01_coach_turn1.mp3 │ ├── g01_learner_turn1.mp3 │ ├── g01_hawker_response.mp3 │ └── bell.mp3 └── images/ ├── watermarked_img_16796381299859510136.png (Lesson 1 background) └── ... (other images) 3. Update the HTML File Paths If you put your audio files in an audio/ folder, update the paths in the HTML: javascript // Find this section in the script (around line 500) const audioTracks = { "01": { name: "Hawker Stall", level: "A1", hawker: "audio/g01_hawker_turn1.mp3", // ← Add "audio/" prefix coach: "audio/g01_coach_turn1.mp3", // ← Add "audio/" prefix learner: "audio/g01_learner_turn1.mp3", // ← Add "audio/" prefix hawkerResponse: "audio/g01_hawker_response.mp3", // ← Add "audio/" prefix bell: "audio/bell.mp3" // ← Add "audio/" prefix }, // ... rest of lessons } 4. Place Your Background Image For Lesson 1, you need this image file: watermarked_img_16796381299859510136.png Place it in the same folder as your index.html OR update the path in the HTML: html style="background-image: url('watermarked_img_16796381299859510136.png');" Change to: html style="background-image: url('images/watermarked_img_16796381299859510136.png');" 5. Quick Audio Recording Tips Option A: Use a Voice Recorder App Record each line clearly Save as MP3 format Keep recordings short (2-5 seconds per line) Option B: Use Text-to-Speech (Quick Test) Use free TTS tools like: Google TTS Amazon Polly (free tier) ElevenLabs (free trial) Generate each line as MP3 Option C: Use AI Voice Cloning (Optional) Use tools like: Play.ht Murf.ai WellSaid 6. Testing Sequence Step 1: Basic Page Load Open index.html in your browser Check that the page loads without errors Look for the "Lesson 1 - Hawker Stall" card Step 2: Check Browser Console Press F12 to open Developer Tools Click on the "Console" tab Look for any red error messages Step 3: Play Lesson 1 Click the Play button on Lesson 1 Expected sequence: text 🍜 Hawker speaks (stereo) → [Audio pans left] → 👨‍🏫 Coach speaks (left channel) → 🎤 Learner's mic turns ON (green pulsing button) → 🎤 Learner speaks (center) → 🍜 Hawker responds (stereo) → ✅ Lesson complete! Step 4: Test Spar Mode Click the Spar Mode toggle (top right) Click Play on Lesson 1 again This time it should skip the Coach: text 🍜 Hawker speaks → [Audio pans left] → 🎤 Learner's mic turns ON → 🎤 Learner speaks → 🍜 Hawker responds → ✅ Lesson complete! 7. Common Issues & Fixes Issue Solution Audio doesn't play Check file paths in the JavaScript. Use relative paths correctly. "Failed to load resource" Make sure MP3 files exist in the right folder. Button doesn't change Check that play-btn-01 ID exists in the HTML. No panning effect Browser must support Web Audio API (Chrome, Firefox, Edge). Audio plays but no visual Check browser console for JavaScript errors. CORS errors Serve files from a local server (not file://). Use VS Code Live Server. 8. Quick Test Without Audio Files If you want to test the UI immediately without creating audio files: The code has a fallback tone that plays if audio files are missing You'll hear a beep/sine wave instead of speech The visual sequence (button colors, mic indicators) will still work 9. Use VS Code Live Server (Recommended) Install VS Code Install the "Live Server" extension Right-click index.html → "Open with Live Server" This prevents CORS issues with local audio files 10. Test Checklist ✅ Page loads without errors ✅ Lesson 1 card displays correctly ✅ Images show (or have placeholder background) ✅ Clicking Play changes button to Stop ✅ Audio plays (even if fallback tone) ✅ Button turns red during playback ✅ Button turns green when learner speaks ✅ Spar Mode toggle works ✅ Clicking Stop stops all audio Final Test Command To quickly verify everything is working, open your browser console (F12) and type: javascript // Test if audio tracks are loaded console.log(audioTracks["01"]); // Test if button exists console.log(document.getElementById('play-btn-01')); // Test manual play playTrack('01'); Quick Start Summary Put all MP3 files in an audio/ folder Update paths in the JavaScript to audio/filename.mp3 Open with Live Server (not directly from file explorer) Click Play on Lesson 1 Watch the sequence play through Check console for any errors Need help with any of these steps? Let me know! I am suppose to update the index.html file with the above? Yes! You need to update your index.html file with the complete code I provided. Here's exactly what to do: Step-by-Step Instructions 1. Copy the Complete HTML Code Copy the entire code from my last response (the one with all 10 lessons). It starts with: html and ends with: html 2. Replace Your Current index.html Open your current index.html file Select ALL (Ctrl+A or Cmd+A) Delete everything Paste the new complete code Save the file (Ctrl+S or Cmd+S) 3. Update Audio File Paths Inside the JavaScript section (near the bottom), find the audioTracks object and update the file paths. Current paths (if files are in same folder): javascript const audioTracks = { "01": { name: "Hawker Stall", level: "A1", hawker: "g01_hawker_turn1.mp3", // ← Same folder as index.html coach: "g01_coach_turn1.mp3", // ← Same folder as index.html learner: "g01_learner_turn1.mp3", // ← Same folder as index.html hawkerResponse: "g01_hawker_response.mp3", // ← Same folder as index.html bell: "bell.mp3" // ← Same folder as index.html }, // ... rest } If you put audio in a subfolder called audio/: javascript const audioTracks = { "01": { name: "Hawker Stall", level: "A1", hawker: "audio/g01_hawker_turn1.mp3", // ← In audio folder coach: "audio/g01_coach_turn1.mp3", // ← In audio folder learner: "audio/g01_learner_turn1.mp3", // ← In audio folder hawkerResponse: "audio/g01_hawker_response.mp3", // ← In audio folder bell: "audio/bell.mp3" // ← In audio folder }, // ... rest } 4. Update Image Paths Find the image URLs in the HTML and update them: Current (same folder): html style="background-image: url('watermarked_img_16796381299859510136.png');" If images are in images/ folder: html style="background-image: url('images/watermarked_img_16796381299859510136.png');" 5. Create Your Audio Files Place these MP3 files in the correct location (same folder or audio/ folder): text For Lesson 1 (Hawker Stall): ├── g01_hawker_turn1.mp3 ├── g01_coach_turn1.mp3 ├── g01_learner_turn1.mp3 ├── g01_hawker_response.mp3 └── bell.mp3 6. Test the Page Open index.html in your browser Press F12 to open Developer Tools Click the Console tab to see any errors Click the Play button on Lesson 1 Watch the sequence play through 7. Quick Verification After updating, open your browser console (F12) and run: javascript // Check if the page loaded correctly console.log(document.querySelector('h1').textContent); // Should show: "ASITIS.BIZ" // Check if Lesson 1 button exists console.log(document.getElementById('play-btn-01')); // Should show: Ready
🍜 Hawker
"Hello! What would you like to eat today? We have chicken rice, noodles, and fried kway teow."
👨‍🏫 Coach
"Listen to the hawker's question. Your response should be: 'I would like chicken rice please.'"
🎤 Learner
"I would like chicken rice please."
🍜 Hawker
"Good choice! Would you like soup or dry?"
Click Play to start the dialogue