Here is a very small app that lets you play each phoneme.
phonics1.aia (2.6 MB)
Designer
Explanation, step by step:
We need only one global variable, the list of phoneme file names.

At app startup, we need to fill it.
The File component has a block to list all the file names in a directory.
Here, I ask for the Asset file scope, which covers all the mp3 files that were uploaded into this Project's Media folder (among others).
We use a List Picker to offer the selection of phonemes the user might want to hear.
This is the event that fills the Elements of a List Picker between the moment you Click the List Picker (it looks like a button before triggered) and before the List Picker lists out all its Elements for the user to choose from.
We read the data flow from right to left, coming from the global variable files that was populated earlier.
We first filter out the file names that contain ".mp3", because those are phoneme sound files.
Since we just want to name of the phoneme with out the .mp3 part at the end, we run the list through a list block that lets us map incoming values to improved values, in this case by replacing the ".mp3" part of the name with an empty string. Don't worry, the files list is still there, we are just working with a temporary copy to fill the Elements list of the List Picker.
By this point, the Elements list just has small phoneme names, little pieces of text from the mp3 file names. They are all unique, as good phoneme names should be.
This is the part of the List Picker where I must tell it what to do with the user's Selection.
A Selection is the Element the user poked.
In this case, it is the name of a phoneme, so we set the lpkPhoneme.Text value to that Selection.
This gives the user feedback that he didn't miss with his finger, and releaves the user of having to hold that phoneme name in his head for too long.
Once we have the phoneme name, it is time to prime our one and only Player component (Player1), with the name of the sound file it should play if and when we ask it to play its sound.
Now we tell the Player Player1 to Start its sound.
We have a Play button to let the user play the currently loaded Player1 sound file again.
We could have just loaded its .Text value up with the Selected phoneme name, with nice big bold font and color set in the Designer, but for some strange reason the developer thought button background image files were better. That mess is hidden in the value procedure image , further below.
This is the Play button, which doesn't actually have the .Text "Play", but has had its background image loaded with an image of the text of the current phoneme selection. (It's an indullgence.) When the Click event fires, we set the Source of thePlayer to the name of the mp3 file for the currently selected phoneme. The file name is built up from a Text JOIN of the phoneme and ".mp3", reversing what was done to get the clean list of phoneme Elements earlier in the List Picker.
Once the Player is ready with the proper file name, we tell it to Start.
This is the final missing piece, the value procedure that can take a phoneme ("ba") and turn it into a matching .png file name from the Media folder. For some strange reason, the original developer added an extra letter to the file name ("baa.png") matching the vowel letter. So since the vowel letter is at the end of the phoneme name, we use the length of the phoneme text in characters to tell us which letter the segment block should pull out of the phoneme. We then make a three level sandwich to build up the file name
- phoneme
- extra vowel letter
- .png
and then that's what the value procedure returns.