类似QQ音乐、网易云音乐之类的网页播放器怎么实现的？ 麻烦把需要用的技术和大致思路说一下。

Question

类似QQ音乐、网易云音乐之类的网页播放器怎么实现的？ 麻烦把需要用的技术和大致思路说一下。

Answer 1

流媒体服务器和客户端,比如:
服务器: Adobe Flash Media Server / nginx+nginx-rtmp-module+ffmpeg
客户端: Adobe Flash Player / HTML5 video|audio
具体可以看下面这篇文章:
nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器
过程大概是:

Client <-> 协议(RTMP/HTTP(HLS)) <-> Nginx(rtmp-module) <-> FFmpeg <-> 资源文件

至于客户端,可以用ckplayer这个国人开发的免费的网页视频播放器,支持Flash和HTML5,可以用来播放服务器上的MP4等多媒体文件.

Answer 2

有audio标签，js控制

Answer 3

小弟前端初学者,一起讨论讨论.1楼大哥的答案我很赞同

但我在网易云音乐的页面上没有找到<audio>标签.
点击下一首的时候,会有两个连接

控制台network监测到一个我第一次见到的状态码 206

不知道这个文件是咋个播放的

这是控制模块的html代码

   
    <div class="m-playbar m-playbar-lock" style="top: -53px; visibility: visible;" id="auto-id-4DUGNOK0WXaEDBAw">
    <div class="updn">
    <div class="left f-fl"><a href="javascript:;" class="btn" hidefocus="true" data-action="lock"></a></div>
    <div class="right f-fl"></div>
    </div>
    <div class="bg"></div>
    <div class="hand" title="展开播放条"></div>
    <div class="wrap" id="g_player">
    <div class="btns">
    <a href="javascript:;" hidefocus="true" data-action="prev" class="prv" title="上一首(ctrl+←)">上一首</a>
    <a href="javascript:;" hidefocus="true" data-action="play" class="ply j-flag" title="播放/暂停(p)">播放/暂停</a>
    <a href="javascript:;" hidefocus="true" data-action="next" class="nxt" title="下一首(ctrl+→)">下一首</a>
    </div>
    <div class="head j-flag"><img src="http://p4.music.126.net/r4e63K3wU4uq8mMDYC0QxA==/3387595325946384.jpg?param=34y34"><a href="/song?id=27908565" hidefocus="true" class="mask"></a></div>
    <div class="play">
    <div class="j-flag words"> <a hidefocus="true" href="/song?id=27908565" class="f-thide name fc1 f-fl" title="我好想你">我好想你</a><span class="by f-thide f-fl"><span title="潘广益"><a class="" href="/artist?id=1046460" hidefocus="true">潘广益</a></span></span><a href="/playlist?id=471472171&amp;_hash=songlist-27908565" class="src" title="来自歌单"></a></div>
    <div class="m-pbar" data-action="noop">
    <div class="barbg j-flag" id="auto-id-NhFBE2vfBuUATIrG">
    <div class="rdy" style="width: 0%;"></div>
    <div class="cur" style="width:0%;"><span class="btn f-tdn f-alpha" id="auto-id-f6Z5RnbPXVBFlWIT"><i></i></span></div>
    </div>
    <span class="j-flag time"><em>00:00</em> / 00:00</span>
    </div>
    </div>
    <div class="oper f-fl">
    <a href="javascript:;" hidefocus="true" data-action="like" class="icn j-flag icn-add" title="收藏">收藏</a>
    <a href="javascript:;" hidefocus="true" data-action="share" class="icn icn-share" title="分享">分享</a>
    </div>
    <div class="ctrl f-fl f-pr j-flag">
    <div class="m-vol" style="visibility:hidden;" id="auto-id-64FAueVTWredwSq7">
    <div class="barbg"></div>
    <div class="vbg j-t" id="auto-id-kvlochts6hoUElHw"><div class="curr j-t" style="height: 74.4px;"></div>
    <span class="btn f-alpha j-t" style="top: 16.2px;"></span></div>
    </div>
    <a href="javascript:;" hidefocus="true" data-action="volume" class="icn icn-vol"></a>
    <a href="javascript:;" hidefocus="true" data-action="mode" class="icn icn-shuffle" title="随机"></a>
    <span class="add f-pr">
    <span class="tip" style="display:none;">已添加到播放列表</span>
    <a href="javascript:;" title="播放列表" hidefocus="true" data-action="panel" class="icn icn-list s-fc3">34</a>
    </span>
    <div class="tip tip-1" style="display:none;">随机</div>
    </div>
    </div>
    </div>

如果你找到了,麻烦告我一声 :)

Answer 4

就是用 audio标签 去实现的，用js去控制播放开始，暂停，音量等等~~
我写过一篇文章专门介绍过
https://segmentfault.com/a/11...

Answer 5

视频音频的话。直接使用aduio/vedio/embed 这类的。然后高版本的有API可以直接操作。
直播的话。一般都是用flash了。因为这样的是做的推流