html5 mp3player的动态地址和未知文件名,如下面的代码所示

时间:2014-09-12 20:00:48

标签: javascript php html5 media-player flash

正如您在下面看到的那样,我所拥有的代码可以完全发挥作用,从用户那里读取上传的mp3文件,然后将其传递给Flash播放器进行播放。

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>';

但我想改用html5播放器。我会说这样的话。

<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>

我尝试了所有可能用于源的东西以便读取文件但仍然无法这样做。请注意,我没有文件名,不知道,将由用户上传。 提前致谢。这是我第一次使用本网站,如果我没有完全遵循提问的规则,请忽略。

修改

我使用了以下代码 我保留了HTML5和javascript以查看哪一个可以使用。我想摆脱因为与移动设备的兼容性而工作的swf flash。

{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>';

1 个答案:

答案 0 :(得分:1)

应该。

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

如果相对路径不起作用,请尝试完整路径(例如http://www.yourwebsite.com/music/user-file.mp3

我曾经写过这样的剧本,但我正在使用自定义按钮来播放/暂停。 它看起来像这样,工作得很完美。

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();
   }

假设您的路径确实有效,那么应该没有问题。