All geek questions in one place

How to play multiple audio files on one web page? (based on best practices)

I have a page with a list of dictionaries. I have a TTS for each dictionary. The current approach I'm using is to enable an mp3 player for each dictionary. This creates a delay for loading the entire flash, as there can be more than 10 dictionaries on one page.

Another problem is that the mp3 tts file must be created on the page load, which also gives a delay in download time.

Some alternative approach, in my opinion, is as follows:

  • only includes one flash player.
  • Download the file and click it to reduce the page load to create the tts file.

So my question is:

Is there a javascript or jquery plugin that can do either of the other two approaches?

Thank you

+6
source share
1 answer

You can use the <audio> (HTML5), and you can control it when files are uploaded.
It is supported in most browsers such as Google Chrome, Firefox, Opera ...

It has two ways to set the link:

Method 1

 <audio src="YOUR FILE LINK HERE"> <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed> </audio>

Way 2

 <audio> <source src="YOUR FILE LINK HERE (MP3)" type="audio/ogg" /> <source src="YOUR OTHER FILE LINK HERE (OGG)" type="audio/mp3" /> <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed> </audio>

Attributes

  • Put controls="controls" if you want it to display an audio player.
  • Put loop="loop" if you want it to encode audio.
  • Put autoplay="autoplay" if you want it to play sound by itself.
  • Put preload="preload" if you want to preload it.

Javascript control

You can also control it using JavaScript.

To play it: document.getElementById("YOUR AUDIO TAG") .play()
To pause it: document.getElementById("YOUR AUDIO TAG") .pause()

More details

+4
source

Source: https://habr.com/ru/post/895932/

More articles:


All Articles