Web-based playful learning of singing

A web-based app that makes learning to sing playful, using real-time audio feedback, gamified challenges, and tools for both students and teachers.

Text
Singit.site: Boat Race

Initial situation

Singing is a core part of music education in Swiss schools but is typically taught in group settings, limiting individual feedback. Students often feel shy or lack confidence, and teachers face time constraints, making it difficult to provide tailored guidance. There is a need for a digital solution that enables individual practice and feedback — without replacing classroom singing.

Problem statement / Project goal

The project aims to develop a web-based app that helps students learn singing through playful, interactive activities. It addresses three challenges: providing real-time audio analysis for immediate feedback, using gamification to increase motivation and engagement, and offering teachers useful data to monitor student progress. The goal is a system that works in everyday classroom contexts and supports both students and educators.

Technical Implementation
                            
Singit was built using modern web technologies like Symfony, Alpine.js, and Meyda for audio analysis. It supports real-time pitch detection and runs smoothly in-browser across devices.
Gamification & Pedagogics
                            
The app includes playful challenges like Boat Race and Obstacle Runner. Game mechanics such as coins, flagpoles, and hurdles are tied to pedagogical principles to support motivation and flow.
Teacher Support
                            
Teachers access a dashboard that shows each student’s singing activity, time spent, and performance scores—helping identify progress and support students individually.

Solution developed and its benefits

The developed application "Singit" includes two core activities: Boat Race (sustain a vocal tone) and Obstacle Runner (rhythmic vocal input). These activities are gamified using coins, milestones, and challenges, grounded in pedagogical concepts like flow theory, constructivism, and behaviorism. A teacher dashboard visualizes usage and performance data in a transparent and time-efficient way.

Gamified singing activities for engagement and fun
Real-time feedback using web-based audio analysis
Teacher dashboard with time and performance data
Encourages regular practice with motivational loops
Built using Symfony, Alpine.js, PostgreSQL, and Meyda

This solution allows students to practice singing in a low-pressure environment and helps teachers support individual progress more effectively — all within a browser-based app, without additional hardware or installation.

Testimonial
«I really enjoyed the boat race; this game was the most fun for me because you can train a tone, and you can train to hold it for longer. And I think that could be useful for the future!»
Student, age 15 (user evaluation)

Key terms

Gamification Game elements applied in educational settings
Real-time audio analysis Detecting and processing vocal input instantly in the browser
Flow theory Educational model balancing challenge and skill to sustain engagement
Constructivism Active, feedback-driven learning by doing
Teacher dashboard Interface for monitoring student performance

Customer

Pädagogische Hochschule FHNW – Professur für Musikpädagogik im Jugendalter
Gabriel Imthurn
Bahnhofstrasse 6
5210 Windisch
Web: Pädagogische Hochschule FHNW – Professur für Musikpädagogik im Jugendalter

Team

Lukas Walter
Matthias Lantsch

Advisor
Kevin Kim
Manuel Riedi