Hi, I'm trying to make a music app. Simple. I would like to add songs to a button. How could I do this? Screenshots are welcome. Thank you.
Charles
Hello Charles,
I guess the following forum Post(link) will work for you.
Link - https://www.outsystems.com/forums/discussion/68709/about-adding-audio-mp3-file-and-playing-it/
Best Regards,
Dinesh Kumar.
Thank you I tried that but I don't understand it. I even downloaded the oml. file. Any other suggestions?
I found a way to add music to a button using query, but when I press the button again it plays again, rather I want it to stop
Hi Charles,
Please see the attached OML as sample.
In this sample I have uploaded the mp3 file and display in block using HTML5Video widget.
Please use this mp3.
Thanks now how do I add the mp3 to the html5video block? Also, this block doesn't appear in any modules. Is there a way to create it?
Refer to this post: https://www.outsystems.com/forums/discussion/68982/stop-a-sound-i-played-onclick-from-a-popup-button/#Post277136
I hope this helps you!
Kind regards,
Benjith Sam
Thank you,
Im still having trouble with getting the sound to stop from the button. Preferably a switch.
How do you get a button to stop playing the sound and start again if clicked again?
Click once: play sound
Click while playing sound: stop sound
Click again: play sound from start
Using Javascript
Sorry for the late reply. Check out the attached oml for the stated use case. The latest implementation also uses the same block with a bit of logic change in the screen level for the switch control.
See the demo: HTML5AudioPlayerSwitchDemo
JS Snippet:
var audioPlayer = document.querySelector('#' + $parameters.audioElementId); // Play audio audioPlayer.play(); // Stop the running audio audioPlayer.pause(); audioPlayer.currentTime = 0; // reset the track current time to 0
To stop the music from replaying when the button is pressed again, you can implement a toggle function. Upon the button press, check if the music is currently playing, and if so, stop it; otherwise, play it. This approach ensures a seamless user experience.