• jQuery+JSONP实现虾米音乐的检索、选取和播放


    jQuery+JSONP实现虾米音乐的检索、选取和播放

    这篇文章是我自己原创的,所以请各位转载的朋友注意追加本文连接。

    http://www.jqdemo.com/927.html

    很多人都希望能在发帖的时候带上音乐。

    当然你可以去 http://swf123.com/创建一个flash播放器带上音乐,但是这个是需要你追加一个可以用的音乐地址的。

    而虾米不同,你可以直接调用他的widget.最后生成图中展示的播放器。

    这里公布核心代码,提供案例下载。

    在此感谢bejson收集各种免费的json接口

    这里我们要用到的接口是:

    http://kuang.xiami.com/app/nineteen/search/key/歌曲名称/diandian/1/page/歌曲当前页?_=当前毫秒&callback=getXiamiData
     
    返回是一个getXiamiData(json数据)的回调函数 其中的json如图:
     
    我们可以看到我们所查的音乐位于/results数组里
    song_id 就是音乐的ID
    song_name就是音乐名称
    album_logo就是专辑图片
     

    主要步骤:

    1.我们主要是要做一个搜索框并且绑定他的keyup事件

    var timer;
    function searchMusicList(Page){
    	searchMusicLoading(true);
    	musicPage = Page;
    	var head = "search_result";
        var src1="http://kuang.xiami.com/app/nineteen/search/key/"+encodeURIComponent($("#search_input").val())+"/diandian/1/page/"+Page+"?_="+new Date().getTime()+"&callback=getXiamiData";
    	if(timer!=null) clearTimeout(timer);
    		
    
    		timer= setTimeout(function(){
    			JSONP = $.getScript(src1,  function(result){});
    		}, 500);
    	
    }

    这段代码其实很简单 就是加载jsonp数据,但是这里增加了一个倒计时函数,目的在于一首歌不可能只有一个字母,你要是没敲一个字母都要去检索一次,浏览器会非常的慢。

    所以我这里定义了一个定时器,如果keyup之后发现当前的timer存在则重置当前timer

     

    2.剩下的就是去解析返回的jsonp了。那个比较简单,不多讲

    3.获取到前面的song_id,song_name等参数后 我们只需要拼接播放器代码

    $(".songLi").live('click',function(){
    	var PL =  '<h3>曲名:'+$(this).attr("name")+'</h3><embed src="http://www.xiami.com/widget/470304_' + $(this).attr("id") + '/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed> <div><ul><li><div id="divFri"></div></li><li>';
    	art.dialog(PL);
    })

    这样就可以在点击歌曲列表时候弹出播放器主键。

     

    原文转自:jQuery+JSONP实现虾米音乐的检索、选取和播放

  • 相关阅读:
    poj3268(Silver Cow Party)最短路
    关于Phaser
    关于StampedLock
    关于AQS
    关于Exechanger
    关于Semaphore
    关于CyclicBarrier
    关于CountDownLatch
    关于BlockingQueue
    关于ThreandLocal
  • 原文地址:https://www.cnblogs.com/jqdemo/p/3134038.html
Copyright © 2020-2023  润新知