PHP+JS实现简易在线音乐播放器(仅支撑站内资源播放)

最近在开发逐梦小站的管理中心。

说起来有近三个月,但实际投入写代码的时间却少的可怜。业余时间本就有限的很,不仅要完成老板布置的家庭作业,还得抽空上PMP课、打Dota、下棋、过年陪家人,忙的不可开交。(没错,我就是在找借口,我不仅贪玩还要吐槽喜欢在周末布置任务的老板)

在线音乐播放器如果采集在线资源,则难度倍增。我这种没啥执行力的人,只能等哪天心血来潮再搞啦。

但如果只是播放站内资源,则非常简单。实现效果见网站地图 | welcom to yixzm.cn右下角的《听听》播放器。建议使用chrome播放器,我没做CSS兼容性偶。

参考代码如下:

HTML

只需显示一个audio控件

<div id="music_player">    
    <h3>听听</h3>
    <div id="music_list"></div>
    <audio id='audio' controls controlsList='nodownload' oncontextmenu='return false'></audio>
    <input type="submit" id="next_music" value="换一首" onclick="getMusic()">
</div>

JS

资源链接更新,资源信息更新,并监听播放状态

function getMusic()
{
    ajax("GET","/welcom/api/get_music_list", case_getMusic, null);
}

function case_getMusic(response)
{
    var json = evil(response);
    $('music_list').innerHTML = "<p>"+json[0]+"</p>";
    audio.src = json[1];
}

getMusic();

var audio = $('audio');
audio.loop = false;
audio.addEventListener('ended', function () {
    getMusic();        
    audio.play();
    audio.autoplay = true;
}, false);

PHP实现资源获取

后台实现获取资源链接,发送给前端

private static function get_music_list()
{
    $json = ... ...
    return json_encode($json);
}

资源获取过程太low,就不写出来啦。

诶,今天先写这么多,争取下次能做个相对不low的东西。

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!