先下载素材:http://pan.baidu.com/s/1pJiWQfT ,提取码:ecn2


html5player
素材是我从网上下载后修改的,改成可侧边伸缩。播放cd旋转。(这都不是事儿)
本篇主要介绍如何用wp后端以数组的形式输出播放列表,用于链接后端与前端播放的设置。
因为在后台主题设置获取歌名和链接等信息后,要组织成数组最后用wp_localize_script函数本地化输出json数据,方便在页面文档下面的播放器的js调用。
后端具体代码(加入functions.php)

/*
 *脚本或样式wp_enqueue
*/
function inlo_enqueue_scripts() {
    wp_localize_script( 'script', 'playlist',  // script是播放器js文件名,playlist是json数组名
        music_info();        
    );    
}
add_action( 'wp_enqueue_scripts', 'inlo_enqueue_scripts' );

/*
 *后端获取歌曲信息-二维数组
 *@ inlojv.com
 *
*/
function music_info(){
    $music_length = 1;
    $musicInfo = array();
    while ( _option('music' .$music_length. '_name') ){ // 主题设置输出
        $musicInfo[] = array('title'=>_option('music' .$music_length. '_name'),'cover'=>get_template_directory_uri() .'/img/1.jpg','mp3'=>_option('music' .$music_length. '_url'));
        $music_length += 1;
    }
    return $musicInfo;
}

这样就可以将后端数据以json形式输出到前端方便播放器的js调用了。素材中的script.js里面的playlist数组可以删掉,用这个后端输出的来代替!