diff --git a/docs/index.html b/docs/index.html
index 60bb116..4855670 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -13,7 +13,7 @@
0:00
0:00
-
+
@@ -27,6 +27,7 @@
+
@@ -65,6 +66,4 @@
-
-
diff --git a/docs/player.js b/docs/player.js
index 27031e4..6d0a9fa 100644
--- a/docs/player.js
+++ b/docs/player.js
@@ -1,11 +1,10 @@
// Cache references to DOM elements.
-let elms = ['track', 'timer', 'duration','post', 'playBtn', 'pauseBtn', 'prevBtn', 'nextBtn', 'playlistBtn', "postBtn", 'volumeBtn', 'progress', 'progressBar', 'loading', 'playlist', 'list', 'volume', 'barEmpty', 'barFull', 'sliderBtn'];
+let elms = ['track', 'timer', 'duration','post', 'playBtn', 'pauseBtn', 'prevBtn', 'nextBtn', 'playlistBtn', 'postBtn', 'waveBtn', 'volumeBtn', 'progress', 'progressBar','waveCanvas', 'loading', 'playlist', 'list', 'volume', 'barEmpty', 'barFull', 'sliderBtn'];
elms.forEach(function(elm) {
window[elm] = document.getElementById(elm);
});
-
/**
* Player class containing the state of our playlist and where we are in it.
* Includes all methods for playing, skipping, updating the display, etc.
@@ -18,10 +17,9 @@ let Player = function(playlist) {
// Display the title of the first track.
track.innerHTML = playlist[this.index].title;
document.querySelector("body").style.backgroundImage = "url(" +media+ encodeURI(playlist[this.index].pic) + ")";
- post.style.display="none";
post.innerHTML = playlist[this.index].article;
- // Setup the playlist display.
+ // Setup the playlist display.
playlist.forEach(function(song) {
let div = document.createElement('div');
div.className = 'list-song';
@@ -61,34 +59,24 @@ Player.prototype = {
requestAnimationFrame(self.step.bind(self));
// Start the wave animation if we have already loaded
- // wave.container.style.display = 'block';
- // bar.style.display = 'none';
progressBar.style.display = 'block';
pauseBtn.style.display = 'block';
},
onload: function() {
// Start the wave animation.
- // wave.container.style.display = 'block';
- // bar.style.display = 'none';
progressBar.style.display = 'block';
loading.style.display = 'none';
},
onend: function() {
// Stop the wave animation.
- // wave.container.style.display = 'none';
- // bar.style.display = 'block';
self.skip('next');
},
onpause: function() {
// Stop the wave animation.
- // wave.container.style.display = 'none';
- // bar.style.display = 'block';
progressBar.style.display = 'none';
},
onstop: function() {
// Stop the wave animation.
- // wave.container.style.display = 'none';
- // bar.style.display = 'block';
progressBar.style.display = 'none';
},
onseek: function() {
@@ -111,7 +99,8 @@ Player.prototype = {
document.querySelector('#list-song-'+playNum).style.backgroundColor='';//清除上一首选中
document.querySelector('#list-song-'+index).style.backgroundColor='rgba(255, 255, 255, 0.1)';//高亮当前播放
playNum=index;
-
+
+ //https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
this.analyser=Howler.ctx.createAnalyser();
this.analyser.fftSize = 256;
this.bufferLength = this.analyser.frequencyBinCount;
@@ -119,10 +108,6 @@ Player.prototype = {
Howler.masterGain.connect(this.analyser);
draw();
- //之后通过如下指令就可获取
- // player.analyser.getByteFrequencyData(player.dataArray);
- // player.analyser.getByteTimeDomainData(player.dataArray);
-
// Show the pause button.
if (sound.state() === 'loaded') {
playBtn.style.display = 'none';
@@ -137,9 +122,7 @@ Player.prototype = {
self.index = index;
},
- /**
- * Pause the currently playing track.
- */
+ //暂停
pause: function() {
let self = this;
@@ -249,9 +232,7 @@ Player.prototype = {
}
},
- /**
- * Toggle the playlist display on/off.
- */
+ //是否显示歌曲列表
togglePlaylist: function() {
let self = this;
let display = (playlist.style.display === 'block') ? 'none' : 'block';
@@ -273,6 +254,12 @@ Player.prototype = {
else{post.style.display="none";}
},
+ //是否显示频率
+ toggleWave: function() {
+ if(waveCanvas.style.display=="none"){waveCanvas.style.display="block";}
+ else{waveCanvas.style.display="none";}
+ },
+
/**
* Toggle the volume display on/off.
*/
@@ -351,6 +338,9 @@ playlist.addEventListener('click', function() {
postBtn.addEventListener('click', function() {
player.togglePost();
});
+waveBtn.addEventListener('click', function() {
+ player.toggleWave();
+});
volumeBtn.addEventListener('click', function() {
player.toggleVolume();
});
@@ -389,55 +379,13 @@ let move = function(event) {
volume.addEventListener('mousemove', move);
volume.addEventListener('touchmove', move);
-// Setup the "waveform" animation.
-// let wave = new SiriWave({
-// container: waveform,
-// width: window.innerWidth,
-// height: window.innerHeight * 0.3,
-// cover: true,
-// speed: 0.03,
-// amplitude: 0.7,
-// frequency: 2
-// });
-// wave.start();
-
-// Update the height of the wave animation.
-// These are basically some hacks to get SiriWave.js to do what we want.
-let resize = function() {
- // let height = window.innerHeight * 0.3;
- // let width = window.innerWidth;
- // wave.height = height;
- // wave.height_2 = height / 2;
- // wave.MAX = wave.height_2 - 4;
- // wave.width = width;
- // wave.width_2 = width / 2;
- // wave.width_4 = width / 4;
- // wave.canvas.height = height;
- // wave.canvas.width = width;
- // wave.container.style.margin = -(height / 2) + 'px auto';
-
- // Update the position of the slider.
- // let sound = player.playlist[player.index].howl;
- let sound = null;
- if (sound) {
- let vol = sound.volume();
- let barWidth = (vol * 0.9);
- sliderBtn.style.left = (window.innerWidth * barWidth + window.innerWidth * 0.05 - 25) + 'px';
- }
-};
-window.addEventListener('resize', resize);
-resize();
-
-
-
-let c=document.getElementById("waveCanvas");
-let canvasCtx=c.getContext("2d");
+let canvasCtx=waveCanvas.getContext("2d");
function draw() {
let HEIGHT = window.innerHeight;
let WIDTH = window.innerWidth;
- c.setAttribute('width', WIDTH);
- c.setAttribute('height', HEIGHT);
+ waveCanvas.setAttribute('width', WIDTH);
+ waveCanvas.setAttribute('height', HEIGHT);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
drawVisual = requestAnimationFrame(draw);
@@ -461,16 +409,3 @@ function draw() {
x += barWidth + 1;
}
}
-
-
-// Create an analyser node in the Howler WebAudio context
-// let analyser = Howler.ctx.createAnalyser();
-// Connect the masterGain -> analyser (disconnecting masterGain -> destination)
-// Howler.masterGain.connect(analyser);
-
-// Howler.masterGain.disconnect();
-// level = Howler.ctx.createGain();
-// Howler.masterGain.connect(level);
-// level.gain.setValueAtTime(levelValue, Howler.ctx.currentTime);
-// level.connect(Howler.ctx.destination);
-
diff --git a/docs/styles.css b/docs/styles.css
index cff73f7..8aad4a6 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -137,6 +137,14 @@ body {
left: calc(5% + 80px);
margin: -17.5px auto;
}
+#waveBtn {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23fff' d='M128 64c0-17.7 14.3-32 32-32H320c17.7 0 32 14.3 32 32V416h96V256c0-17.7 14.3-32 32-32H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H512V448c0 17.7-14.3 32-32 32H320c-17.7 0-32-14.3-32-32V96H192V256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h96V64z'/%3E%3C/svg%3E");
+ width: 44px;
+ height: 35px;
+ top: 50%;
+ right: calc(5% + 80px);
+ margin: -17.5px auto;
+}
#volumeBtn {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM412.6 181.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5z'/%3E%3C/svg%3E");
width: 35px;
@@ -341,4 +349,5 @@ body {
@media screen and (max-width: 600px) {
#track{display: none;}
#postBtn{display: none;}
+#waveBtn{display: none;}
}
diff --git "a/media/\346\230\237\344\271\213\346\211\200\345\234\250(\345\270\203\351\262\201\346\226\257\345\217\243\347\220\264).jpg" "b/media/\346\230\237\344\271\213\346\211\200\345\234\250(\345\270\203\351\262\201\346\226\257\345\217\243\347\220\264).jpg"
index 07cb5cf..3f6b359 100644
Binary files "a/media/\346\230\237\344\271\213\346\211\200\345\234\250(\345\270\203\351\262\201\346\226\257\345\217\243\347\220\264).jpg" and "b/media/\346\230\237\344\271\213\346\211\200\345\234\250(\345\270\203\351\262\201\346\226\257\345\217\243\347\220\264).jpg" differ