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
Christian J
post Jan 26 2022, 10:33 AM
Post #2


.
********

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



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. wacko.gif

CODE
<script type="text/javascript">

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 26 2022, 04:01 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,734
Joined: 9-August 06
Member No.: 6



Maybe the OP's files are only short snips. tongue.gif

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. biggrin.gif
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: 13th May 2024 - 11:28 AM