How to play an audio track without using "controls" Options

[giomach]

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]

You can set an audio to play with an onclick(example: button onclick) without controls. This can be done with javascript

[giomach]

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]

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]

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]

Thanks for the correction, you are right, but it doesn't really help.

[pandy]

OK. In what way doesn't it help though?

[pandy]

I mean why can't you use any of those solutions?

[Christian J]

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]

Oops! I misread. I thought the OP wanted it to play in the background on the same page.

[fspade]

Sorry, I wasn't clear enough. I meant »how can I keep the file ›from‹ being opend in an new tab or window«?

[pandy]

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]

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]

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]

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]

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]

Sorry, I didn't mean tracks like you do now; I meant individuel mp3 files.

[Christian J]

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.

[Christian J]

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]

(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.