文档加载完成后，随机获取一首音乐，然后播放。点击上一曲或下一曲都是随机切换歌曲，以及可以对音量进行控制，有兴趣的朋友还可以自行实现歌词的同步播放。有关html5媒体原生API，大家可以参考HTML5的Video标签的属性,方法和事件汇总
部分代码如下：
var mediaEvts = ['loadedmetadata','ended','timeupdate','error']; //随机获取一首音乐 function getSong(){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(xhr.responseText); }else{ reject('发生错误'); } } }; xhr.open('get', 'http://api.jirengu.com/fm/getSong.php?channel=1', !0); xhr.send(); }); } function dealSong(responseText){ var songObj = JSON.parse(responseText), song = songObj.song[0]; updateUI(song); setMedia(song); return song; } function setMedia(song){ var songSrc = song.url, lrc = song.lrc; player.src = songSrc; player.volume = 0.5; player.play(); } function updateUI(song){ var name = song.title, artist = song.artist, img = song.picture; songName.innerText = name; author.querySelector('span').innerText = artist; bg.style.backgroundImage = 'url('+img+')'; } //初始化audio元素事件监听 function initMediaEvents(player){ mediaEvts.forEach(function(evt,idx,arr){ var cb = evt+'CB'; player.addEventListener(evt,window[cb],!1); }); }
3、后台实现
使用express+socket.io实现长连接，socket.io可以利用npm进行安装。根据UA实现PC+移动端渲染不同的页面，将移动端的发送的命令广播给PC端，然后达到移动端控制PC的效果，代码如下所示：
const http = require('http'); var express = require('express'); var app = express(); var server = require('http').Server(app); var io = require('socket.io')(server); app.use(express.static('./')); app.get('https://www.jb51.net/',(req,res)=>{ var userAgent = req.headers['user-agent'].toLowerCase(); if(/(android|iphone|mobile)/.test(userAgent)){ res.sendFile(__dirname+'/shake_m.html'); }else{ res.sendFile(__dirname+'/shake_pc.html'); } }); io.on('connection',function(socket){ var usrname = '', sendData = {}; console.log('a client connect...'+socket.id); socket.on('disconnect',function(){ console.log(`设备${socket.id}断开连接.`); }); socket.on('message',function(data){ var cmd = data.cmd; //next命令是由移动端发送，OK命令是由PC切歌成功后发送的命令 if(cmd == 'next'){ socket.broadcast.emit('next'); }else if(cmd == 'ok'){ socket.broadcast.emit('ok',data.data); } }); }); server.listen(3000,function(){ console.log('start listening on 3000 port...'); })；
4、移动端和PC端加上socket.io
首先在页面中引入socket.io.js，然后连接socket服务器，接着监听事件即可，如下所示：
//移动端socket逻辑 socket.on('connect',function(){ console.log('websocket连接已建立...'); }); socket.on('ok',function(data){ if(found.src!=host+'found.mp3'){ found.src = 'found.mp3'; } found.play(); tip.innerText = '正在欣赏：'+data.artist+'--'+data.title; tip.classList.remove('active'); tip.offsetWidth = tip.offsetWidth; tip.classList.add('active'); }); function dealShake(){ if(isShaking) return; isShaking = !0; if(shaking.src!=host+'shaking.mp3'){ shaking.src = 'shaking.mp3'; } shaking.play(); wrap.classList.add('active'); setTimeout(function(){ socket.emit('message',{cmd:'next',data:null}); },1000); } //PC端socket逻辑 function initIOEvts(){ socket.on('connect',function(){ console.log('websocket连接已建立...'); }); socket.on('next',function(data){ getSong().then(function(val){ var song = dealSong(val); socket.emit('message',{cmd:'ok',data:song}); },function(err){ console.log(err); }); }); }
当用户摇动设备触发摇一摇时，发送一个next命令的消息给服务端，然后服务端将该消息转发给PC端，PC端接收到该消息后，执行歌曲切换操作，并反馈一个ok命令消息并携带歌曲消息给服务端，服务端再将该消息转发回移动端，移动端播放切歌成功的声音并显示当前PC播放的歌曲。
这个功能主要是我自己使用，可能有些细节没有进行处理，大家可以在该基础上进行改造，还可以做一些多屏互动的效果。