How to play an audio track without using "controls" |
How to play an audio track without using "controls" |
giomach |
Jun 19 2021, 12:07 PM
Post
#1
|
Group: Members Posts: 2 Joined: 19-June 21 Member No.: 27,985 |
I have an audio file (mp3), and I want to allow the web user to choose to play a section (track) of it.
I could split the audio file into many separate files, but I have begun to look at the <track> sub-element of the <audio> element of HTML5. Many webpages tell us how to formulate this element, eg. to give the start time of each track in a .vtt file, and that is fine. But I don't want "controls", I want to display a list of tracks, and let the user decide which track to play, and click an icon to play it. It must be blindingly obvious how to do this, but I can't find the HTML statement to start up a numbered track. Thanks for any hints. |
The_webmaster |
Jun 21 2021, 10:29 AM
Post
#2
|
Member Group: Members Posts: 40 Joined: 5-February 21 Member No.: 27,773 |
You can set an audio to play with an onclick(example: button onclick) without controls. This can be done with javascript
|
giomach |
Jul 1 2021, 06:13 AM
Post
#3
|
Group: Members Posts: 2 Joined: 19-June 21 Member No.: 27,985 |
Thanks for your reply.
I have not found how to use <track>, but I have managed to get something working using <select> (and some javascript, as you suggested). I found this example useful as a starting point: https://html5.komplett.cc/code/chap_video/j...oPlayer_en.html |
fspade |
Jan 23 2022, 05:56 AM
Post
#4
|
Group: Members Posts: 8 Joined: 22-January 22 Member No.: 28,234 |
I have put my mp3 in an href and it works, but how can I keep the file being opend in an new tab or window (BTW: I don't want to use controls like <audio>).
If you want to have a look: https://www.spade.de/theend.htm |
pandy |
Jan 23 2022, 07:45 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I have put my mp3 in an href and it works, but how can I keep the file being opend in an new tab or window (BTW: I don't want to use controls like <audio>). If you want to have a look: https://www.spade.de/theend.htm It isn't opened in a new window, it's loaded in the original window. The same as happens when you link to another HTML file or directly to an image file. If you want the original page to stay while the audio starts to play you need to embed the audio, not link to it. It can probably also be done with some JavaScript magic. |
fspade |
Jan 23 2022, 08:21 AM
Post
#6
|
Group: Members Posts: 8 Joined: 22-January 22 Member No.: 28,234 |
Thanks for the correction, you are right, but it doesn't really help.
|
pandy |
Jan 23 2022, 08:42 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
OK. In what way doesn't it help though?
|
pandy |
Jan 23 2022, 10:54 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I mean why can't you use any of those solutions?
|
Christian J |
Jan 23 2022, 03:01 PM
Post
#9
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
how can I keep the file being opend in an new tab or window You mean you want to open the link in a new window? If so, see https://htmlhelp.com/faq/html/links.html#new-window |
pandy |
Jan 23 2022, 03:49 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Oops! I misread. I thought the OP wanted it to play in the background on the same page.
|
fspade |
Jan 23 2022, 04:06 PM
Post
#11
|
Group: Members Posts: 8 Joined: 22-January 22 Member No.: 28,234 |
Sorry, I wasn't clear enough. I meant »how can I keep the file ›from‹ being opend in an new tab or window«?
|
pandy |
Jan 23 2022, 04:39 PM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
So I read what you meant!
OK. So why can't you embed the file and use a little JavaScript? At least try. Put this in HEAD, for example last before </head> CODE <script type="text/javascript"> function playIt() { var sound = document.getElementById("myAudio"); sound.play(); } </script> Put this somewhere in BODY. It won't be visible. HTML <audio id="myAudio" src="dasende.mp3"></audio> Change your link like this. CODE <a href="dasende.mp3" onclick="playIt();return false">Vorlesen...</a> Isn't that what you want? |
fspade |
Jan 24 2022, 03:15 AM
Post
#13
|
Group: Members Posts: 8 Joined: 22-January 22 Member No.: 28,234 |
Pandy,
you are my hero! That is exactly what I dreamt of. I owe you at least a coffee. Contact me when you come near. Keep up the good work and stay healthy and happy! Frank |
pandy |
Jan 24 2022, 03:58 AM
Post
#14
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
And you thought it wouldn't help.
I want to explain the link. That you also have the URL to the sound file in the href combined with the return false after that function call, makes it work either JS is available or not. If it is available the return false kills the link event. Without it the link would be followed and you would get what you originally had. But if JS is not available the link will be followed and the user will at least hear the sound, even if it will load a s a new page. |
fspade |
Jan 24 2022, 04:00 AM
Post
#15
|
Group: Members Posts: 8 Joined: 22-January 22 Member No.: 28,234 |
Sorry, one final question:
What has to change, if I want to play different tracks at different parts of the page? As of now, it always plays the first track, even though I copied your HTML- and code-parts to every place and changed the audio file names accordingly. |
pandy |
Jan 24 2022, 04:12 AM
Post
#16
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
There is a JS property called audioTracks. Don't know if it used as the name suggests, but worth looking into, I guess. There also is a HTML element called TRACK. I don't really know much about audio. Maybe Christian knows more.
But I didn't think mp3 supported tracks? |
fspade |
Jan 24 2022, 07:25 AM
Post
#17
|
Group: Members Posts: 8 Joined: 22-January 22 Member No.: 28,234 |
Sorry, I didn't mean tracks like you do now; I meant individuel mp3 files.
|
Christian J |
Jan 24 2022, 08:46 AM
Post
#18
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
|
Christian J |
Jan 24 2022, 08:58 AM
Post
#19
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Sorry, I didn't mean tracks like you do now; I meant individuel mp3 files. Here's a modification of pandy's script: CODE <script type="text/javascript"> function playIt(audio_id) { var sound = document.getElementById(audio_id); sound.play(); } </script> <audio id="myAudio1" src="dasende1.mp3"></audio> <audio id="myAudio2" src="dasende2.mp3"></audio> <a href="dasende1.mp3" onclick="playIt('myAudio1');return false">Vorlesen1...</a> <a href="dasende2.mp3" onclick="playIt('myAudio2');return false">Vorlesen2...</a> Each AUDIO element needs its own unique ID value. Also, each corresponding link needs to send that same value as its function call parameter, like this: CODE playIt('myAudio1') Then it automatically translates into the "audio_id" argument in the function: CODE function playIt(audio_id) (Hope I got the terminology right there, I always mix up parameters and arguments.) |
pandy |
Jan 24 2022, 09:14 AM
Post
#20
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 18th April 2024 - 12:04 AM |