首页 > 代码库 > html网页音乐播放器自带播放列表

html网页音乐播放器自带播放列表

基于网页的音乐播放器demo  http://pan.baidu.com/s/1dDgm7HR

自己diy了一个手机端在线音乐播放器演示地址http://shanxi2014.com/zhuandizhi/dom.php

全面支持手机端浏览器。

主要修改引用路径(不要修改文件相对存放地址)

第二就是正则拼接参数了

<script src="http://www.mamicode.com/city/js/libs/jquery-1.10.2.min.js"></script>
<script src="http://www.mamicode.com/city/js/libs/jquery-ui.min.js"></script>
<script src="http://www.mamicode.com/city/js/libs/bootstrap.min.js"></script>

<!-- Style CSS -->
<link href="http://www.mamicode.com/city/css/bootstrap.css" media="screen" rel="stylesheet">
<link href="http://www.mamicode.com/city/style.css" media="screen" rel="stylesheet">

<!-- General Scripts -->
<script src="http://www.mamicode.com/city/js/general.js"></script>

<!-- custom input -->
<script src="http://www.mamicode.com/city/js/jquery.customInput.js"></script>

<!-- Placeholders -->
<script src="http://www.mamicode.com/city/js/jquery.powerful-placeholder.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        if($("[placeholder]").size() > 0) {
            $.Placeholder.init();
        }
    });
</script>

<!-- CarouFredSel  -->
<script src="http://www.mamicode.com/js/jquery.carouFredSel-6.2.1-packed.js"></script>

<!-- Lightbox prettyPhoto -->
<link href="http://www.mamicode.com/css/prettyPhoto.css" rel="stylesheet">
<script src="http://www.mamicode.com/js/jquery.prettyPhoto.js"></script>

<!-- Video Player -->
<link href="http://www.mamicode.com/city/css/video-js.css" rel="stylesheet">
<script src="http://www.mamicode.com/city/js/video.js"></script>
<script>
    videojs.options.flash.swf = "js/video-js.swf";
</script>

<!-- Audio Player -->
<link href="http://www.mamicode.com/city/css/jplayer.css" rel="stylesheet">
<script src="http://www.mamicode.com/city/js/jquery.jplayer.min.js"></script>
<script src="http://www.mamicode.com/city/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [<?php if(strlen($a[2])>6){foreach ($a as $va) {
        echo $tittle.$va;
};}?>
        {title:"<div class=‘item-image‘><img src=http://www.mamicode.com/‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘  />
终于等到你",m4a:"http://cc.stream.qqmusic.qq.com/C100003GF7MY2P0fz7.m4a?fromtag=52"},{title:"<div class=‘item-image‘><img src=http://www.mamicode.com/‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ />
陪你走到底",m4a:"http://cc.stream.qqmusic.qq.com/C100003GX33X2aLY1R.m4a?fromtag=52"},{title:"<div class=‘item-image‘><img src=http://www.mamicode.com/‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ />
如果爱下去",m4a:"http://cc.stream.qqmusic.qq.com/C10000395SnV0rl1hZ.m4a?fromtag=52"},{title:"<div class=‘item-image‘><img src=http://www.mamicode.com/‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ />
天下无双",m4a:"http://cc.stream.qqmusic.qq.com/C100002sjtbA1K4ASF.m4a?fromtag=52"} ], { swfPath: "js", supplied: "oga, mp3,m4a", wmode: "window", smoothPlayBar: false, keyEnabled: false }); }); //]]> </script>

搜狗音乐地址获取

<?php
$query=$_GET[‘s‘];
$q= mb_convert_encoding($query,"GBK","UTF-8");
$ew=urlencode($query);
$jsrc = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q={$ew}";
$json = file_get_contents($jsrc);
$jset = json_decode($json, true);
$src=$jset["responseData"]["results"][0]["url"];
$image="<div class=‘item-image‘><img src=http://www.mamicode.com/‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘  />
"; $query=urlencode($query); $url="http://mp3.sogou.com/music.so?query={$query}"; function curl_get($url, array $get = NULL, array $options = array()) { $defaults = array( CURLOPT_URL => $url. (strpos($url, ‘?‘) === FALSE ? ‘?‘ : ‘‘). http_build_query($get), CURLOPT_HEADER => 0, CURLOPT_RETURNTRANSFER => TRUE, CURLOPT_TIMEOUT => 4 ); $ch = curl_init(); curl_setopt_array($ch, ($options + $defaults)); if( ! $result = curl_exec($ch)) { trigger_error(curl_error($ch)); } curl_close($ch); return $result; } $html=curl_get($url,array(), array()); iconv("GB2312","UTF-8//IGNORE",$html); $c="+onclick=\"qqDownload.*http://cc\.stream\.qqmusic\.qq\.com.*\.m4a\?fromtag=52+i"; $elemment=$html; if (preg_match_all($c, $elemment,$matches)){$i=0; $a = array(); $t=array(); foreach ($matches[0] as $val) { $val=explode("@@", $val, 11); $t[$i]="<a href=http://www.mamicode.com/"{$val[10]}\" class=\"btn btn-red btn-round\"><span >{$val[1]}</span></a><br/>"; $i++; $val[1]=$image.$val[1]; $a[$i]="{title:\"{$val[1]}\",". "m4a:\"{$val[10]}\"},"; } } ?>