CODEWITHSUNDEEP
javascriptphphtmlmedia-playerflash
Bob Far
Bob Far

Reputation: 13

dynamic address and unknown file name for html5 mp3player like code below

As you can see below the code that I have is fully functional for reading an uploaded mp3 file from user and then pass it for flash player to play it. 

if($uplfile !="")
    $url = $my_base_url.$my_website_base."/modules/upload/attachments/".$uplfile;
else    
    $url = $this->get_template_vars('enc_url');

$info = pathinfo($url);

if ($info["extension"] == "mp3") 
{
{/php} 

<center>  
  <object type="application/x-shockwave-flash" data="{$my_base_url}{$my_website_base}/templates/{$the_template}/img/player_mp3_maxi.swf" width="200" height="20">
    <param name="movie" value="{$my_base_url}{$my_website_base}/templates/{$the_template}/img/player_mp3_maxi.swf" />
    <param name="bgcolor" value="#ffffff" />
{php}   
echo '    <param name="FlashVars" value="'.urldecode($url).'" />
    <param name="FlashVars" value="mp3='.$url.'&amp;showstop=1&amp;showinfo=1&amp;showvolume=1" />
</object>  

</center>';

However I want to use html5 player instead. I would say something like this.

<audio controls>
  <source src=" **? Don't Know What to put ?** " type="audio/ogg">
  <source src=" **? Don't Know What to put ?** " type="audio/mpeg">
        </audio>

I tried all the possible thing to use for source in order to read the file but still could not to do so. Please be advise that I don't the filename and is unknown and will be uploaded by user. Thanks in advance. this is the first time I'm using this website so please ignore if I didn't follow exactly the rules for asking question.

EDIT

I used the following code I kept both the HTML5 and the javascript to see which one will work. I want to get rid of the swf flash which is working because of compatibility with mobile devices.

{php}
global $db,$my_base_url,$my_pligg_base;
$lid = $this->get_template_vars('link_id');
$uplfile = $db->get_var("select file_name from ".table_prefix."files where file_link_id='".$lid."'  and file_size='orig'");


if($uplfile !="")
    $url = $my_base_url.$my_pligg_base."/modules/upload/attachments/".$uplfile;
else    
    $url = $this->get_template_vars('enc_url');

$info = pathinfo($url);

if ($info["extension"] == "mp3") 
{
{/php} 
<audio controls>
  <source src=" $url " type="audio/ogg">
  <source src=" $url" type="audio/mpeg">
        </audio>
<script type="text/javascript">
function music(track){
   $('#audioPlayer').attr('src', track);
   $('#audioPlayer').attr('autoplay', 'autoplay');
   $.get();
   }

function pauseAudio(){
   $('#audioPlayer').get(0).pause();
   }
   </script>
<img alt="" onclick="music('http://www.raphmond.com/modules/upload/attachments/'); return false;" src="http://www.raphmond.com/templates/coolstrap/img/play.png"> 
<img alt="" onclick="pauseAudio(); return false;" src="http://www.raphmond.com/templates/coolstrap/img/pause.png"> 

<audio id="audioPlayer" src=""></audio>


<center>  
  <object type="application/x-shockwave-flash" data="{$my_base_url}{$my_pligg_base}/templates/{$the_template}/img/player_mp3_maxi.swf" width="200" height="20">
    <param name="movie" value="{$my_base_url}{$my_pligg_base}/templates/{$the_template}/img/player_mp3_maxi.swf" />
    <param name="bgcolor" value="#ffffff" />
{php}   
echo '    <param name="FlashVars" value="'.urldecode($url).'" />
    <param name="FlashVars" value="mp3='.$url.'&amp;showstop=1&amp;showinfo=1&amp;showvolume=1" />

</object>  

</center>';

Upvotes: 1

Views: 234

Answers (1)

faerin
faerin

Reputation: 1925

This should work.

<audio controls src="where-you-keep-your-uploaded-file"></audio>

If a relative path does not work, try the full one (e.g. http://www.yourwebsite.com/music/user-file.mp3)

I once had to write a script like this, but I was using custom-made buttons to play/pause. It was looking something like this and worked flawlessy.

HTML

<img alt="" onclick="music('http://www.my-website.org/media/myfile.mp3'); return false;" src="gfx/play.png"> 
<img alt="" onclick="pauseAudio(); return false;" src="gfx/pause.png"> 

<audio id="audioPlayer" src=""></audio>

JavaScript

function music(track){
   $('#audioPlayer').attr('src', track);
   $('#audioPlayer').attr('autoplay', 'autoplay');
   $.get();
   }

function pauseAudio(){
   $('#audioPlayer').get(0).pause();
   }

Assuming that your path is actually valid, there should be no problems.

Upvotes: 1

Related Questions