Accessible Innovation: Developing an HTML5 Application for Shadowing in Language Education

This paper explores the development of an innovative HTML5-based shadowing application designed to facilitate shadowing and repetition practice for language learners. Shadowing, a technique where learners mimic a model speaker in real time, has been recognized as an effective method for improving pronunciation, fluency, and subconscious language acquisition. Drawing from the lead author’s experiences as a native English instructor at a high school in Japan and a language learner of Japanese and German, this paper outlines the motivation, design, and implementation of the application. The application offers customizable features such as adjustable playback speed, repetition control, and pause length. This paper highlights the application’s conception and development process and its impact on learners, demonstrating how accessible technology can empower educators to create tailored solutions.

Shadowing in Language Learning

Shadowing is an advanced language learning technique that builds on traditional repetition by requiring learners to mimic a model speaker as closely and immediately as possible. Unlike simple repetition, where learners pause to reproduce phrases, shadowing involves continuous input and output, demanding precise replication of pronunciation, intonation, rhythm, and cadence. This method, rooted in theories of subconscious language acquisition, leverages the brain’s predictive capabilities to deepen linguistic competence [1,2]. As learners anticipate upcoming content, they internalize grammatical structures and vocabulary, similar to the immersion process in naturalistic settings [3].

Shadowing offers numerous advantages to learners. This method fosters hyper-focus, effectively combating the common challenge of mental wandering during language study. By seamlessly bridging listening and speaking skills, shadowing accelerates the path to fluency. A study highlights that shadowing significantly enhances students’ psychological engagement by maintaining sustained attention throughout the learning process [4]. For English learners at Baika High School (lisupo.com) and Japanese learners at newsinslowjapanese.com, shadowing offers a practical path to proficiency. This paper introduces an HTML5- based Shadowing Application designed to enhance this technique, born from the author’s personal language learning journey and commitment to leveraging technology in education.

The Role of Technology in Modern Language Education

Technology has revolutionized language education by providing tools that enhance accessibility, engagement, and personalization. From learning management systems (LMS) to mobile applications, digital platforms enable educators to tailor instruction to diverse learner needs. For second language acquisition, technology supports active engagement with authentic materials, immediate feedback, and self-paced practice—elements critical to mastering pronunciation and fluency. As an educator and technologist, the lead author recognized early on that integrating digital tools into language instruction could address gaps in traditional methods, particularly for techniques like shadowing that demand precise control over audio input.

Personal Motivation and Discovery of Shadowing

The lead author’s journey as a Japanese and German language learner profoundly shaped this project. The lead author found himself frustrated by conventional language lab tools that delivered content at a pace he couldn’t match. The inability to slow down audio, repeat phrases, or pause effectively left him demoralized, highlighting a critical gap in available resources. This experience prompted a deeper exploration of shadowing, a technique discovered while seeking methods to improve his fluency. Shadowing’s demand for real-time mimicry forced him to concentrate fully, revealing its potential to accelerate comprehension and speaking skills.

The lead author’s background in educational technology— evidenced by his creation of an LMS for Baika High School called “The Baika Listening Portal” students at lisupo.com—further fuelled this endeavour. Dissatisfied with existing shadowing tools, he sought software to streamline the process. When none met his needs, he built his solution using the HTML5 editing software Hype. Recognizing the complexity of the vision—features like audio chunking, adjustable repetition, and playback speed control— he enlisted the help of a Dallas, Texas based freelance software developer, John Purdy, to bring the application to fruition.

“The Shadowing App”: An Innovative Solution

The Shadowing App, hosted at lisupo.com and newsinslowjapanese.com, emerged as a response to these challenges. Designed to empower learners with control over their practice, it transforms shadowing into an accessible, user-friendly experience. By leveraging HTML5, the application ensures crossplatform compatibility and independence from App Store or Google Play Store restrictions to maintain complete control over its distribution and updates.

Development Process

The application’s development began with the lead author’s proficiency in Hype, a versatile HTML5 editing tool. While he could design basic prototypes, advanced features required expertise beyond his scope. Collaborating with John Purdy, a Hype specialist, proved instrumental. The shared familiarity with the platform facilitated seamless communication, enabling rapid iteration. The development costs were manageable even with a modest budget. To further support the project, the lead author partnered with newsinslowjapanese.com, a commercial site for Japanese learners. This collaboration not only provided funding but also expanded the application’s reach to learners of other languages, demonstrating that innovative educational tools can be developed with reasonable resources.

Key Features for Shadowing and Repetition Practice

The Shadowing App’s strength lies in its customizable features, tailored to the demands of shadowing:
• Repetition Control: This feature allows users to repeat phrases 2, 3, 4, or up to 10 times, reinforcing retention.
• Playback Speed Adjustment: Slows audio without distorting pitch, aiding comprehension and allowing beginning users to keep pace with the content.
• Pause Length Customization: Extends gaps between chunks, giving learners time to process and respond.
• Intuitive Interface: Simplifies navigation for easy access and control, allowing users to stop, play, or instantly access any portion of the content with ease.

These elements address the lead author’s frustrations in language labs, empowering learners to practice at their own pace and build confidence incrementally.

Implementation and Use Cases

At Baika High School, an iconic all-girls high school located in the heart of Osaka, the Shadowing App integrates seamlessly into English instruction via lisupo.com, the LMS (Learning Management System) that F.P. set up in 2014 for his school’s international course students to increase exposure to English listening exercises. Students using the application regularly report marked improvements in fluency, pronunciation, and retention. Its selfpaced nature accommodates varied proficiency levels, fostering a supportive learning environment. Beyond the classroom, its adoption at newsinslowjapanese.com demonstrates broader applicability, serving adult learners worldwide. It has become the site’s most popular feature, earning praise for its user-friendly design and effectiveness.

The Shadowing App exemplifies how modern technology, particularly with AI and accessible development tools, empowers educators to realize their vision. What once required significant resources is now within reach for individuals with imagination and modest technical skills. Developing the application using HTML5 proved prescient, ensuring device compatibility and safeguarding against platform-specific disruptions from entities like Apple or Google.

The HTML5 Shadowing App represents a fusion of pedagogy and technology, born from personal experience and refined through collaboration. Enhancing shadowing practice addresses a critical need in language education, offering learners unprecedented control and flexibility. Its success at Baika High School and newsinslowjapanese.com underscores its impact, while its development process illustrates the power of educator-driven innovation. As technology evolves, tools like this application pave the way for more effective, personalized language learning. Similar applications are available via Apple, Google and Microsoft [5].

The Shadowing App can be sampled using the following URLs:
Version for English Learners: https://lisupo.com/shadowingapp- sample/
Version for Japanese Learners: https://newsinslowjapanese. com/shadowing-app-sample/

We thank John Purdy for his technical expertise in developing the application. We also thank newsinslowjapanese.com for providing funding support for this project.

The authors declare no conflict of interest related to the development or publication of this work.

1. Krashen, Stephen D (1981) Second Language Acquisition and Second Language Learning. Pergamon Press.
2. Clark, Andy (2013) Whatever Next? Predictive Brains, Situated Agents, and the Future of Cognitive Science. Behavioural and Brain Sciences, Cambridge University Press 36(3): 181-204.
3. Andreja Bubic, D Yves von Cramon, Ricarda I Schubotz (2010) Prediction, Cognition and the Brain. Frontiers in Human Neuroscience Frontiers 4: 25.
4. Shiota (2012) The Effectiveness of Shadowing on Students’ Psychology in Language Learning. Journal of Accents.
5. Similar applications available via major brand stores:

Apple: https://apps.apple.com/us/app/shadowing-english-speaking-exercise/id1182789540

Google: https://play.google.com/store/apps/details?id=com.shadowingenglish

Microsoft: https://apps.microsoft.com/detail/9p40xks2t65q?hl=en-gb&gl=US