too many audio tags make my website load very slowly. is there a solution?How do I minimize loading time for html5's audio tag?Loading indicator for HTML5 Audio tag / mediaelement.jsHTML5 object selection and audio playbackHTML5/jQuery audio shuffle onClickhow to pause all playing audios on a pageOgg file not playing multiple times on mobileHTML5 audio tag sound can't be heard on PCSave Bandwidth: Turn Video Into Audio JavaScriptTest whether audio tag has actually loaded an mp3Clicking area of image to change that area's color
I am not able to install anything in ubuntu
Why is "Reports" in the sentence below without the article "The"?
Finding files for which a command fails
Tenured professor’s husband convicted of a drugs-trafficking felony – are there any career implications?
Set-theoretical foundations of Mathematics with only bounded quantifiers
My colleague's body is amazing
What Brexit solution does the DUP want?
Why do UK politicians seemingly ignore opinion polls on Brexit?
Information to fellow intern about Hiring?
Can you lasso down a wizard who is using the Levitate spell?
Are tax years 2016 & 2017 back taxes deductible for tax year 2018?
Set up public ip on server
Why does this relative pronoun not take the case of the noun it is referring to?
Are white and non-white police officers equally likely to kill black suspects?
Should I join an office cleaning event for free?
What is the offset in a seaplane's hull?
Chess with symmetric move-square
XeLaTeX and pdfLaTeX ignore hyphenation
Calculate Levenshtein distance between two strings in Python
least quadratic residue under GRH: an EXPLICIT bound
What is GPS' 19 year rollover and does it present a cybersecurity issue?
Imbalanced dataset binary classification
How can I fix this gap between bookcases I made?
What is the meaning of "of trouble" in the following sentence?
too many audio tags make my website load very slowly. is there a solution?
How do I minimize loading time for html5's audio tag?Loading indicator for HTML5 Audio tag / mediaelement.jsHTML5 object selection and audio playbackHTML5/jQuery audio shuffle onClickhow to pause all playing audios on a pageOgg file not playing multiple times on mobileHTML5 audio tag sound can't be heard on PCSave Bandwidth: Turn Video Into Audio JavaScriptTest whether audio tag has actually loaded an mp3Clicking area of image to change that area's color
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function()
$('audio').each(function()
this.pause(); // Stop playing
// Reset time
);
$('#Swensens_maze_audio').get(0).play();
return false;
);
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
javascript jquery html5
edited Dec 29 '14 at 13:08
yochannah
2,28053248
asked Dec 29 '14 at 11:00
shay kshay k
2317
add a comment |
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function()
$('audio').each(function()
this.pause(); // Stop playing
// Reset time
);
$('#Swensens_maze_audio').get(0).play();
return false;
);
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
javascript jquery html5
edited Dec 29 '14 at 13:08
yochannah
2,28053248
asked Dec 29 '14 at 11:00
shay kshay k
2317
1
Only load the audio files when needed via JS. This may cause some delay, but it's a more proper solution than loading all audio files at once.
– schlenger
Dec 29 '14 at 11:04
1
Maybe you can store the original url inside an attribute calleddata-original, then when an user click on tag audio you can trough JQuery set thesrcattribute equal todata-original, basically a lazyload
– Razorphyn
Dec 29 '14 at 11:06
A short answer would be to have a singleaudioelement on the page and work out someJavascriptto change itssrcattribute according to the clicked part on the image.
– melancia
Dec 29 '14 at 11:17
1) what is the file format of your audio files ? 2) Could you use webAudio ? 3) what about using a single audio file and play different parts of it (audio sprite, using webAudio)
– GameAlchemist
Dec 29 '14 at 11:59
add a comment |
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function()
$('audio').each(function()
this.pause(); // Stop playing
// Reset time
);
$('#Swensens_maze_audio').get(0).play();
return false;
);
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
javascript jquery html5
edited Dec 29 '14 at 13:08
yochannah
2,28053248
asked Dec 29 '14 at 11:00
shay kshay k
2317
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function()
$('audio').each(function()
this.pause(); // Stop playing
// Reset time
);
$('#Swensens_maze_audio').get(0).play();
return false;
);
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
javascript jquery html5
javascript jquery html5
edited Dec 29 '14 at 13:08
yochannah
2,28053248
asked Dec 29 '14 at 11:00
shay kshay k
2317
edited Dec 29 '14 at 13:08
yochannah
2,28053248
asked Dec 29 '14 at 11:00
shay kshay k
2317
edited Dec 29 '14 at 13:08
yochannah
2,28053248
edited Dec 29 '14 at 13:08
yochannah
2,28053248
edited Dec 29 '14 at 13:08
yochannah
2,28053248
2,28053248
asked Dec 29 '14 at 11:00
shay kshay k
2317
asked Dec 29 '14 at 11:00
shay kshay k
2317
asked Dec 29 '14 at 11:00
shay kshay k
2317
2317
1
Only load the audio files when needed via JS. This may cause some delay, but it's a more proper solution than loading all audio files at once.
– schlenger
Dec 29 '14 at 11:04
1
Maybe you can store the original url inside an attribute calleddata-original, then when an user click on tag audio you can trough JQuery set thesrcattribute equal todata-original, basically a lazyload
– Razorphyn
Dec 29 '14 at 11:06
A short answer would be to have a singleaudioelement on the page and work out someJavascriptto change itssrcattribute according to the clicked part on the image.
– melancia
Dec 29 '14 at 11:17
1) what is the file format of your audio files ? 2) Could you use webAudio ? 3) what about using a single audio file and play different parts of it (audio sprite, using webAudio)
– GameAlchemist
Dec 29 '14 at 11:59
add a comment |
1
Only load the audio files when needed via JS. This may cause some delay, but it's a more proper solution than loading all audio files at once.
– schlenger
Dec 29 '14 at 11:04
1
Maybe you can store the original url inside an attribute calleddata-original, then when an user click on tag audio you can trough JQuery set thesrcattribute equal todata-original, basically a lazyload
– Razorphyn
Dec 29 '14 at 11:06
A short answer would be to have a singleaudioelement on the page and work out someJavascriptto change itssrcattribute according to the clicked part on the image.
– melancia
Dec 29 '14 at 11:17
1) what is the file format of your audio files ? 2) Could you use webAudio ? 3) what about using a single audio file and play different parts of it (audio sprite, using webAudio)
– GameAlchemist
Dec 29 '14 at 11:59
1
1
Only load the audio files when needed via JS. This may cause some delay, but it's a more proper solution than loading all audio files at once.
– schlenger
Dec 29 '14 at 11:04
Only load the audio files when needed via JS. This may cause some delay, but it's a more proper solution than loading all audio files at once.
– schlenger
Dec 29 '14 at 11:04
1
1
Maybe you can store the original url inside an attribute called
data-original, then when an user click on tag audio you can trough JQuery set the src attribute equal to data-original, basically a lazyload– Razorphyn
Dec 29 '14 at 11:06
Maybe you can store the original url inside an attribute called
data-original, then when an user click on tag audio you can trough JQuery set the src attribute equal to data-original, basically a lazyload– Razorphyn
Dec 29 '14 at 11:06
A short answer would be to have a single
audio element on the page and work out some Javascript to change its src attribute according to the clicked part on the image.– melancia
Dec 29 '14 at 11:17
A short answer would be to have a single
audio element on the page and work out some Javascript to change its src attribute according to the clicked part on the image.– melancia
Dec 29 '14 at 11:17
1) what is the file format of your audio files ? 2) Could you use webAudio ? 3) what about using a single audio file and play different parts of it (audio sprite, using webAudio)
– GameAlchemist
Dec 29 '14 at 11:59
1) what is the file format of your audio files ? 2) Could you use webAudio ? 3) what about using a single audio file and play different parts of it (audio sprite, using webAudio)
– GameAlchemist
Dec 29 '14 at 11:59
add a comment |
4 Answers
4
active
oldest
votes
EDIT
The audio now automatically strats
EDIT 2
I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map width:100%;height:75px;background:#bbb
.c1 background:#f2f2f2
.c2 background:#000
.c3 background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
);
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.get(0).play();
return false;
);
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map
width:100%;
height:75px;
background:#bbb
.c1
background:#f2f2f2
.c2
background:#000
.c3
background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.play();
return false;
);
</script>
</body>
</html>
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
this is the area - <area shape="rect" coords="2780,2276,2923,2365" href="" alt="falador_party_room" id="falador_party_room"> and this is the audio - <audio id="falador_party_room_audio"> <source src="music/falador_party_room.mp3" type="audio/mp3"> </audio> thank you!
– shay k
Dec 29 '14 at 11:45
also note that the audio tag is not inside the area tag.
– shay k
Dec 29 '14 at 11:47
@shayk so you have a map (<area>) and only oneaudiotag? So when you click on a point then theaudiotag will be updated?
– Razorphyn
Dec 29 '14 at 11:50
i have a lot of area and audio tags there. i put here only one of each for the example. i do want it to be responsive or something that will not force the browser to run all 300 of my audio tags at once
– shay k
Dec 29 '14 at 12:04
@shayk I beg your pardon, but is a little too diffucult wothout the full code, sorry...if you have got some problems to adapt the code just post another question or update this one with a chunk of generated code
– Razorphyn
Dec 29 '14 at 12:18
|
show 3 more comments
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
add a comment |
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
add a comment |
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f27687579%2ftoo-many-audio-tags-make-my-website-load-very-slowly-is-there-a-solution%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
EDIT
The audio now automatically strats
EDIT 2
I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map width:100%;height:75px;background:#bbb
.c1 background:#f2f2f2
.c2 background:#000
.c3 background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
);
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.get(0).play();
return false;
);
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map
width:100%;
height:75px;
background:#bbb
.c1
background:#f2f2f2
.c2
background:#000
.c3
background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.play();
return false;
);
</script>
</body>
</html>
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
this is the area - <area shape="rect" coords="2780,2276,2923,2365" href="" alt="falador_party_room" id="falador_party_room"> and this is the audio - <audio id="falador_party_room_audio"> <source src="music/falador_party_room.mp3" type="audio/mp3"> </audio> thank you!
– shay k
Dec 29 '14 at 11:45
also note that the audio tag is not inside the area tag.
– shay k
Dec 29 '14 at 11:47
@shayk so you have a map (<area>) and only oneaudiotag? So when you click on a point then theaudiotag will be updated?
– Razorphyn
Dec 29 '14 at 11:50
i have a lot of area and audio tags there. i put here only one of each for the example. i do want it to be responsive or something that will not force the browser to run all 300 of my audio tags at once
– shay k
Dec 29 '14 at 12:04
@shayk I beg your pardon, but is a little too diffucult wothout the full code, sorry...if you have got some problems to adapt the code just post another question or update this one with a chunk of generated code
– Razorphyn
Dec 29 '14 at 12:18
|
show 3 more comments
EDIT
The audio now automatically strats
EDIT 2
I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map width:100%;height:75px;background:#bbb
.c1 background:#f2f2f2
.c2 background:#000
.c3 background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
);
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.get(0).play();
return false;
);
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map
width:100%;
height:75px;
background:#bbb
.c1
background:#f2f2f2
.c2
background:#000
.c3
background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.play();
return false;
);
</script>
</body>
</html>
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
this is the area - <area shape="rect" coords="2780,2276,2923,2365" href="" alt="falador_party_room" id="falador_party_room"> and this is the audio - <audio id="falador_party_room_audio"> <source src="music/falador_party_room.mp3" type="audio/mp3"> </audio> thank you!
– shay k
Dec 29 '14 at 11:45
also note that the audio tag is not inside the area tag.
– shay k
Dec 29 '14 at 11:47
@shayk so you have a map (<area>) and only oneaudiotag? So when you click on a point then theaudiotag will be updated?
– Razorphyn
Dec 29 '14 at 11:50
i have a lot of area and audio tags there. i put here only one of each for the example. i do want it to be responsive or something that will not force the browser to run all 300 of my audio tags at once
– shay k
Dec 29 '14 at 12:04
@shayk I beg your pardon, but is a little too diffucult wothout the full code, sorry...if you have got some problems to adapt the code just post another question or update this one with a chunk of generated code
– Razorphyn
Dec 29 '14 at 12:18
|
show 3 more comments
EDIT
The audio now automatically strats
EDIT 2
I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map width:100%;height:75px;background:#bbb
.c1 background:#f2f2f2
.c2 background:#000
.c3 background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
);
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.get(0).play();
return false;
);
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map
width:100%;
height:75px;
background:#bbb
.c1
background:#f2f2f2
.c2
background:#000
.c3
background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.play();
return false;
);
</script>
</body>
</html>
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
EDIT
The audio now automatically strats
EDIT 2
I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map width:100%;height:75px;background:#bbb
.c1 background:#f2f2f2
.c2 background:#000
.c3 background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
);
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.get(0).play();
return false;
);
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map
width:100%;
height:75px;
background:#bbb
.c1
background:#f2f2f2
.c2
background:#000
.c3
background:#cc4444
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function ()
$('audio').each(function ()
this.pause();
);
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='')
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
audioTag.play();
return false;
);
</script>
</body>
</html>
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
edited Dec 29 '14 at 12:29
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
answered Dec 29 '14 at 11:38
RazorphynRazorphyn
1,0231132
1,0231132
this is the area - <area shape="rect" coords="2780,2276,2923,2365" href="" alt="falador_party_room" id="falador_party_room"> and this is the audio - <audio id="falador_party_room_audio"> <source src="music/falador_party_room.mp3" type="audio/mp3"> </audio> thank you!
– shay k
Dec 29 '14 at 11:45
also note that the audio tag is not inside the area tag.
– shay k
Dec 29 '14 at 11:47
@shayk so you have a map (<area>) and only oneaudiotag? So when you click on a point then theaudiotag will be updated?
– Razorphyn
Dec 29 '14 at 11:50
i have a lot of area and audio tags there. i put here only one of each for the example. i do want it to be responsive or something that will not force the browser to run all 300 of my audio tags at once
– shay k
Dec 29 '14 at 12:04
@shayk I beg your pardon, but is a little too diffucult wothout the full code, sorry...if you have got some problems to adapt the code just post another question or update this one with a chunk of generated code
– Razorphyn
Dec 29 '14 at 12:18
|
show 3 more comments
this is the area - <area shape="rect" coords="2780,2276,2923,2365" href="" alt="falador_party_room" id="falador_party_room"> and this is the audio - <audio id="falador_party_room_audio"> <source src="music/falador_party_room.mp3" type="audio/mp3"> </audio> thank you!
– shay k
Dec 29 '14 at 11:45
also note that the audio tag is not inside the area tag.
– shay k
Dec 29 '14 at 11:47
@shayk so you have a map (<area>) and only oneaudiotag? So when you click on a point then theaudiotag will be updated?
– Razorphyn
Dec 29 '14 at 11:50
i have a lot of area and audio tags there. i put here only one of each for the example. i do want it to be responsive or something that will not force the browser to run all 300 of my audio tags at once
– shay k
Dec 29 '14 at 12:04
@shayk I beg your pardon, but is a little too diffucult wothout the full code, sorry...if you have got some problems to adapt the code just post another question or update this one with a chunk of generated code
– Razorphyn
Dec 29 '14 at 12:18
this is the area - <area shape="rect" coords="2780,2276,2923,2365" href="" alt="falador_party_room" id="falador_party_room"> and this is the audio - <audio id="falador_party_room_audio"> <source src="music/falador_party_room.mp3" type="audio/mp3"> </audio> thank you!
– shay k
Dec 29 '14 at 11:45
this is the area - <area shape="rect" coords="2780,2276,2923,2365" href="" alt="falador_party_room" id="falador_party_room"> and this is the audio - <audio id="falador_party_room_audio"> <source src="music/falador_party_room.mp3" type="audio/mp3"> </audio> thank you!
– shay k
Dec 29 '14 at 11:45
also note that the audio tag is not inside the area tag.
– shay k
Dec 29 '14 at 11:47
also note that the audio tag is not inside the area tag.
– shay k
Dec 29 '14 at 11:47
@shayk so you have a map (
<area>) and only one audio tag? So when you click on a point then the audio tag will be updated?– Razorphyn
Dec 29 '14 at 11:50
@shayk so you have a map (
<area>) and only one audio tag? So when you click on a point then the audio tag will be updated?– Razorphyn
Dec 29 '14 at 11:50
i have a lot of area and audio tags there. i put here only one of each for the example. i do want it to be responsive or something that will not force the browser to run all 300 of my audio tags at once
– shay k
Dec 29 '14 at 12:04
i have a lot of area and audio tags there. i put here only one of each for the example. i do want it to be responsive or something that will not force the browser to run all 300 of my audio tags at once
– shay k
Dec 29 '14 at 12:04
@shayk I beg your pardon, but is a little too diffucult wothout the full code, sorry...if you have got some problems to adapt the code just post another question or update this one with a chunk of generated code
– Razorphyn
Dec 29 '14 at 12:18
@shayk I beg your pardon, but is a little too diffucult wothout the full code, sorry...if you have got some problems to adapt the code just post another question or update this one with a chunk of generated code
– Razorphyn
Dec 29 '14 at 12:18
|
show 3 more comments
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
add a comment |
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
add a comment |
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
answered Dec 29 '14 at 13:33
CryptopatCryptopat
1,83311823
1,83311823
add a comment |
add a comment |
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
add a comment |
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
add a comment |
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
answered May 22 '15 at 8:45
Παναγιώτης ΚυριακόπουλοςΠαναγιώτης Κυριακόπουλος
1
1
add a comment |
add a comment |
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
add a comment |
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
add a comment |
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
edited Mar 9 at 3:54
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
answered Mar 8 at 12:27
Bharat TiwariBharat Tiwari
13
13
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f27687579%2ftoo-many-audio-tags-make-my-website-load-very-slowly-is-there-a-solution%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Only load the audio files when needed via JS. This may cause some delay, but it's a more proper solution than loading all audio files at once.
– schlenger
Dec 29 '14 at 11:04
1
Maybe you can store the original url inside an attribute called
data-original, then when an user click on tag audio you can trough JQuery set thesrcattribute equal todata-original, basically a lazyload– Razorphyn
Dec 29 '14 at 11:06
A short answer would be to have a single
audioelement on the page and work out someJavascriptto change itssrcattribute according to the clicked part on the image.– melancia
Dec 29 '14 at 11:17
1) what is the file format of your audio files ? 2) Could you use webAudio ? 3) what about using a single audio file and play different parts of it (audio sprite, using webAudio)
– GameAlchemist
Dec 29 '14 at 11:59