The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> How to play an audio track without using "controls"
giomach
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
fspade
post Jan 24 2022, 07:25 AM
Post #2





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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 24 2022, 08:58 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,671
Joined: 10-August 06
Member No.: 7



QUOTE(fspade @ Jan 24 2022, 01:25 PM) *

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.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
giomach   How to play an audio track without using "controls"   Jun 19 2021, 12:07 PM
The_webmaster   You can set an audio to play with an onclick(examp...   Jun 21 2021, 10:29 AM
giomach   Thanks for your reply. I have not found how to us...   Jul 1 2021, 06:13 AM
fspade   I have put my mp3 in an href and it works, but how...   Jan 23 2022, 05:56 AM
pandy   I have put my mp3 in an href and it works, but ho...   Jan 23 2022, 07:45 AM
Christian J   how can I keep the file being opend in an new tab...   Jan 23 2022, 03:01 PM
pandy   Oops! I misread. I thought the OP wanted it to...   Jan 23 2022, 03:49 PM
fspade   Thanks for the correction, you are right, but it d...   Jan 23 2022, 08:21 AM
pandy   OK. In what way doesn't it help though?   Jan 23 2022, 08:42 AM
pandy   I mean why can't you use any of those solution...   Jan 23 2022, 10:54 AM
fspade   Sorry, I wasn't clear enough. I meant »how ca...   Jan 23 2022, 04:06 PM
pandy   So I read what you meant! :D OK. So why can...   Jan 23 2022, 04:39 PM
fspade   Pandy, you are my hero! That is exactly what I...   Jan 24 2022, 03:15 AM
pandy   And you thought it wouldn't help. :rolleyes: ...   Jan 24 2022, 03:58 AM
pandy   There is a JS property called audioTracks. Don...   Jan 24 2022, 04:12 AM
Christian J   There is a JS property called audioTracks. Don...   Jan 24 2022, 08:46 AM
fspade   Sorry, one final question: What has to change, if ...   Jan 24 2022, 04:00 AM
fspade   Sorry, I didn't mean tracks like you do now; I...   Jan 24 2022, 07:25 AM
Christian J   Sorry, I didn't mean tracks like you do now; ...   Jan 24 2022, 08:58 AM
pandy   (Hope I got the terminology right there, I always...   Jan 24 2022, 09:14 AM
Christian J   [quote name='Christian J' post='143119' date='Jan...   Jan 24 2022, 04:33 PM
pandy   Maybe argument and parameter are the same thing. I...   Jan 25 2022, 06:06 AM
Brian Chandler   Maybe argument and parameter are the same thing. ...   Jan 25 2022, 11:26 PM
fspade   Each AUDIO element needs its own unique ID value. ...   Jan 24 2022, 09:32 AM
fspade   It works! I love it.   Jan 24 2022, 09:46 AM
pandy   We aim to please. :D   Jan 24 2022, 09:57 AM
Christian J   Thought I'd try to improve the player. In this...   Jan 26 2022, 10:33 AM
pandy   Maybe the OP's files are only short snips. :P...   Jan 26 2022, 04:01 PM
Christian J   there ought to be a way to check if the audio is ...   Jan 26 2022, 05:26 PM
pandy   OK, state it is. I was almost sure there was somet...   Jan 26 2022, 06:06 PM
Christian J   Now you confused me, did you mean "toggle...   Jan 26 2022, 08:15 PM
pandy   Sorry, I just skimmed and didn't see state was...   Jan 26 2022, 11:03 PM


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd May 2024 - 03:39 PM