Skip to content

Commit

Permalink
添加频谱是否显示按钮
Browse files Browse the repository at this point in the history
  • Loading branch information
@Meekdai
Meekdai committed Oct 20, 2023
1 parent f939c06 commit 95bfc39
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 86 deletions.
5 changes: 2 additions & 3 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<span id="track"></span>
<div id="timer">0:00</div>
<div id="duration">0:00</div>
<div id="post"></div>
<div id="post" style="display:none;"></div>
</div>

<!-- Controls -->
Expand All @@ -27,6 +27,7 @@
</div>
<div class="btn" id="playlistBtn"></div>
<div class="btn" id="postBtn"></div>
<div class="btn" id="waveBtn"></div>
<div class="btn" id="volumeBtn"></div>
</div>

Expand Down Expand Up @@ -65,6 +66,4 @@

<!-- TODO -->
<!-- 歌曲加载动画有bug -->
<!-- 添加post内容显示 -->
<!-- 播放按钮SVG有问题 -->

101 changes: 18 additions & 83 deletions docs/player.js
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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';
Expand Down Expand Up @@ -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() {
Expand All @@ -111,18 +99,15 @@ 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;
this.dataArray = new Uint8Array(this.bufferLength);
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';
Expand All @@ -137,9 +122,7 @@ Player.prototype = {
self.index = index;
},

/**
* Pause the currently playing track.
*/
//暂停
pause: function() {
let self = this;

Expand Down Expand Up @@ -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';
Expand All @@ -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.
*/
Expand Down Expand Up @@ -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();
});
Expand Down Expand Up @@ -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);
Expand All @@ -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);

9 changes: 9 additions & 0 deletions docs/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -341,4 +349,5 @@ body {
@media screen and (max-width: 600px) {
#track{display: none;}
#postBtn{display: none;}
#waveBtn{display: none;}
}
Binary file modified media/星之所在(布鲁斯口琴).jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 95bfc39

Please sign in to comment.