I am developing a web page that (among other things) allows a visitor to choose a music track to preview.
I have around 20 tracks that they can pick from and it has come to my attention (through Web Page Test) that, with the way I have achieved this, the browser is downloading all the tracks (it is reporting my page to be 30Mb!!!).
Here is the code I have used to put Preview buttons on to the page (I am using the plugin? mp3 Player):
<audio id='audio<?php echo $uniqueID; ?>'>
<source src='<?php echo $fullMusicURLs; ?>' type='audio/mpeg' />
<object id='flash_obj<?php echo $uniqueID; ?>' class='playerpreview' type='application/x-shockwave-flash' data='<?php echo TEMPLATE_URL; ?>/music_player/player_mp3_multi.swf' width='200' height='200'>
<param name='movie' value='<?php echo TEMPLATE_URL; ?>/music_player/player_mp3_multi.swf' />
<param name='bgcolor' value='#085c68' />
<param name='FlashVars' id='paramFlashVars<?php echo $uniqueID; ?>' value='<?php echo $flashVars; ?>' />
<embed href='<?php echo TEMPLATE_URL; ?>/music_player/player_mp3_multi.swf' bgcolor='#085c68' width='200' height='200' name='movie' align='' type='application/x-shockwave-flash' flashvars='<?php echo $flashVars; ?>' />
</object>
</audio>
<div id='custom_player_fallback<?php echo $uniqueID; ?>'></div>
<div id="musicPlayer<?php echo $uniqueID; ?>">
<div class="pcss3f pcss3f-layout-resp pcss3f-size-small">
<button type='button' class="musicPreviewButtonButton" id="previewMusicButton<?php echo $uniqueID; ?>" onClick="document.getElementById('audio<?php echo $uniqueID; ?>').play()">Preview</button>
</div>
</div>
<script>
var templateURL = "<?php echo TEMPLATE_URL; ?>";
var musicURL = "<?php echo trim($fullMusicURLs); ?>";
var musicTitle = "<?php echo trim($fullMusicTitles); ?>";
var idIncrement = "<?php echo $uniqueID; ?>";
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg') &&
!document.createElement('audio').canPlayType('audio/ogg')) {
swfobject.embedSWF(templateURL+"/music_player/player_mp3_multi.swf",
"custom_player_fallback"+idIncrement, "200", "200", "9.0.0", "",
{"mp3":musicURL, "title":musicTitle},
{"bgcolor":"#085c68"}
);
}
}
</script>
The code is working brilliantly and doing everything I need it to do. It works on iPhones and iPads etc.
Is there a way to alter the code so that it doesn't download the music track until the user clicks the Preview button?
Many thanks for any help you can give me with this.
