Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ How to play an audio track without using "controls"
Posted by: giomach Jun 19 2021, 12:07 PM
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.
Posted by: The_webmaster Jun 21 2021, 10:29 AM
You can set an audio to play with an onclick(example: button onclick) without controls. This can be done with javascript
Posted by: giomach Jul 1 2021, 06:13 AM
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/js_videoPlayer_en.html
Posted by: fspade Jan 23 2022, 05:56 AM
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
Posted by: pandy Jan 23 2022, 07:45 AM
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.
Posted by: fspade Jan 23 2022, 08:21 AM
Thanks for the correction, you are right, but it doesn't really help.
Posted by: pandy Jan 23 2022, 08:42 AM
OK. In what way doesn't it help though?
Posted by: pandy Jan 23 2022, 10:54 AM
I mean why can't you use any of those solutions?
Posted by: Christian J Jan 23 2022, 03:01 PM
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
Posted by: pandy Jan 23 2022, 03:49 PM
Oops! I misread. I thought the OP wanted it to play in the background on the same page. 
Posted by: fspade Jan 23 2022, 04:06 PM
Sorry, I wasn't clear enough. I meant »how can I keep the file ›from‹ being opend in an new tab or window«?
Posted by: pandy Jan 23 2022, 04:39 PM
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>
function playIt()
{
var sound = document.getElementById("myAudio");
sound.play();
}
</script>
Put this somewhere in BODY. It won't be visible.
Change your link like this.
Isn't that what you want?
Posted by: fspade Jan 24 2022, 03:15 AM
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
Posted by: pandy Jan 24 2022, 03:58 AM
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.
Posted by: fspade Jan 24 2022, 04:00 AM
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.
Posted by: pandy Jan 24 2022, 04:12 AM
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?
Posted by: fspade Jan 24 2022, 07:25 AM
Sorry, I didn't mean tracks like you do now; I meant individuel mp3 files.
Posted by: Christian J Jan 24 2022, 08:46 AM
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.
No.
Posted by: Christian J Jan 24 2022, 08:58 AM
Sorry, I didn't mean tracks like you do now; I meant individuel mp3 files.
Here's a modification of pandy's script:
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:
Then it automatically translates into the "audio_id" argument in the function:
(Hope I got the terminology right there, I always mix up parameters and arguments.)
Posted by: pandy Jan 24 2022, 09:14 AM
(Hope I got the terminology right there, I always mix up parameters and arguments.)
I've never known what that's called and I've even searched for it. Now I at least know it's either argument or parameter. Probably.
Posted by: fspade Jan 24 2022, 09:32 AM
Then it automatically translates into the "audio_id" argument in the function:
Thanks Christian, I am happy about you all's help.
PS: I owe you at least a coffee.
Posted by: fspade Jan 24 2022, 09:46 AM
It works! I love it.
Posted by: pandy Jan 24 2022, 09:57 AM
We aim to please.
Posted by: Christian J Jan 24 2022, 04:33 PM
(Hope I got the terminology right there, I always mix up parameters and arguments.)
I've never known what that's called and I've even searched for it. Now I at least know it's either argument or parameter. Probably.
Here they use both on the same page:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length
"length is a property of a function object, and indicates how many arguments the function expects, i.e. the number of formal parameters."
Maybe an argument is a kind of parameter?
Posted by: pandy Jan 25 2022, 06:06 AM
Maybe argument and parameter are the same thing. I find these and similar definitions.
An argument is a way for you to provide more information to a function.
A parameter is a special kind of variable used in a function to refer to one of the pieces of data provided as input to the function.
Argument is the term I'm more used too, feels more "programmy". For some reason I haven't thought of this as an argument, but I suppose it is.
Posted by: Brian Chandler Jan 25 2022, 11:26 PM
Maybe argument and parameter are the same thing. I find these and similar definitions.
An argument is a way for you to provide more information to a function.
A parameter is a special kind of variable used in a function to refer to one of the pieces of data provided as input to the function.
Argument is the term I'm more used too, feels more "programmy". For some reason I haven't thought of this as an argument, but I suppose it is.
I wouldn't give either of these definitions more than 1/10. Basically there is very little difference in meaning between "argument" and "parameter", but I think normally in mathematics a function has arguments; if anything "parameter" is more "programmy", because it is more likely to be used for subroutines (remember them?) More generally parameter has a meaning relating to generalisation. If you have a bunch of functions (or for that matter, web pages) each of which retrieves the information about puzzles from a particular manufacturer's website, then you might decide to integrate these into a single function or page, parameterised by manufacturer.
Posted by: Christian J Jan 26 2022, 10:33 AM
Thought I'd try to improve the player. In this version you only need one AUDIO element. While testing with my own audio files I also realized the need for a stop button. 
function playIt(task)
{
var audio=document.getElementById('myAudio');
if(task=='stop')
{
audio.pause();
}
else
{
audio.src=task;
audio.play();
}
}
</script>
<audio id="myAudio"></audio>
<a href="dasende1.mp3" onclick="playIt(this.href); return false;">Vorlesen1...</a>
<a href="dasende1.mp3" onclick="playIt(this.href); return false;">Vorlesen2...</a>
<a href="#" onclick="playIt('stop'); return false;">Stop audio player</a>
Posted by: pandy Jan 26 2022, 04:01 PM
Maybe the OP's files are only short snips. 
I haven't googled, but there ought to be a way to check if the audio is already playing and if it is the same link could be used to both start and pause it. The script would also have to change the link text from Play to stop though. "Play or Stop" is just too odd.
Posted by: Christian J Jan 26 2022, 05:26 PM
there ought to be a way to check if the audio is already playing and if it is the same link could be used to both start and pause it.
When I clicked again my audio just restarts.
There's a CONTROLS attribute you can use, which is perhaps better since it gives the user a standardized interface, but maybe it will be confusing together with the above javascripts (without the scripts you may have to use separate AUDIO elements for each file).
I often use "Toggle" in such cases.
function playIt(url)
{
var audio=document.getElementById('myAudio');
if(audio.src==url && state=='playing') // same file is already playing
{
audio.pause();
state='paused';
}
else
{
audio.src=url;
audio.play();
state='playing';
}
}
Posted by: pandy Jan 26 2022, 06:06 PM
OK, state it is. I was almost sure there was something like that, but didn't want to search for it.
Posted by: Christian J Jan 26 2022, 08:15 PM
Now you confused me, did you mean "toggle"?
I can make the script change the link text when it's clicked if I have to. 
Posted by: pandy Jan 26 2022, 11:03 PM
Sorry, I just skimmed and didn't see state was a variable you created. I mistook it for an audio property. I see now when you did.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)