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

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

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

全面支持手机端浏览器。

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

第二就是正则拼接参数了


<script src="/city/js/libs/jquery-1.10.2.min.js"></script>
<script src="/city/js/libs/jquery-ui.min.js"></script>
<script src="/city/js/libs/bootstrap.min.js"></script>

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

<!-- General Scripts -->
<script src="/city/js/general.js"></script>

<!-- custom input -->
<script src="/city/js/jquery.customInput.js"></script>

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

<!-- CarouFredSel -->
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>

<!-- Lightbox prettyPhoto -->
<link href="css/prettyPhoto.css" rel="stylesheet">
<script src="js/jquery.prettyPhoto.js"></script>

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

<!-- Audio Player -->
<link href="/city/css/jplayer.css" rel="stylesheet">
<script src="/city/js/jquery.jplayer.min.js"></script>
<script src="/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://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ /></div>终于等到你",m4a:"http://cc.stream.qqmusic.qq.com/C100003GF7MY2P0fz7.m4a?fromtag=52"},{title:"<div class=‘item-image‘><img src=‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ /></div>陪你走到底",m4a:"http://cc.stream.qqmusic.qq.com/C100003GX33X2aLY1R.m4a?fromtag=52"},{title:"<div class=‘item-image‘><img src=‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ /></div>如果爱下去",m4a:"http://cc.stream.qqmusic.qq.com/C10000395SnV0rl1hZ.m4a?fromtag=52"},{title:"<div class=‘item-image‘><img src=‘http://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ /></div>天下无双",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://bsp1.yokacdn.com/starimg/300_400/1d5969ee7bd06ff1cb30fd951be154dd.jpg‘ /></div>";
$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=\"{$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]}\"},";

}
}

?>

html网页音乐播放器自带播放列表,布布扣,bubuko.com

时间: 2024-08-02 07:01:17

html网页音乐播放器自带播放列表的相关文章

网页音乐播放器javascript实现,可以显示歌词

可以显示歌词,但是歌词和歌曲都要实现自己下载下来.只能播放一首歌,歌词还得是lrc格式的代码写的很罗嗦,急切希望帮改改CSS的代码?1.代码:<html >    <head>        <!--下面有很多style都是没用到的,但是我改不动了-->        <!--css觉得真是很麻烦-->        <style type="text/css">            audio            { 

HTML5之audio实战,网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

HTML5网页音乐播放器

1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放暂停.上一首和下一首 2.调整音量和播放进度条 3.根据列表切换当前歌曲 先来看一下最终的完成效果: 这个音乐播放器的结构主要分为三部分:歌曲信息.播放器和播放列表,我们重点介绍一下播放器部分.首先在播放器中放三个audio标签用于播放: <audio id="music1">

网页音乐播放器接口

1.Dewplayer 音乐播放器 2.我的博客首页虾米播放器代码: <embed src="http://www.xiami.com/widget/0_1769834090/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"> </embed&

推荐漂亮的flash网页MP3音乐播放器

文章来源:PHP开发学习门户 地址:http://www.php#thinking.com/archives/491  (去点#) 在网页制作中,如果想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时候网页音乐播放器就很有必要了,一般的情况下如果用背景音乐播放的话有几个很不友好的地方 1.随网页加载就播放,用户不能暂停,停止播放 2.一般浏览器兼容性差,很少能通用全部浏览器 所以一款基于flash的网页音乐播放器就很有必要了. 他有以下一些优点 1.浏览器兼容性好,现在一般的主流

推荐美丽的flash网页MP3音乐播放器

文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/491 在网页制作中.假设想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时候网页音乐播放器就非常有必要了.一般的情况下假设用背景音乐播放的话有几个非常不友好的地方 1.随网页载入就播放,用户不能暂停.停止播放 2.一般浏览器兼容性差.非常少能通用所有浏览器 所以一款基于flash的网页音乐播放器就非常有必要了. 他有下面一些长处 1.浏览器兼容性好.如今一般的主流浏览器都

想把我唱给你听音乐播放器

想把我唱给你听音乐播放器还带字幕哦,希望大家喜欢!~ 下载地址

基于jQuery仿QQ音乐播放器网页版代码

基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m_player" id="divplayer" role="application" onselectstart="return false" style="left: 0px;"> <div class=&

音乐播放器带歌词切换

代码来自潭州java免费视频教程 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>音乐播放器</title