Skip to content

Commit c9cc835

Browse files
NishantGhanateNishantGhanate
committed
Js visual graph added
1 parent e1dd0be commit c9cc835

File tree

3 files changed

+181
-8
lines changed

3 files changed

+181
-8
lines changed

‎Django/MyDjangoApp/Rough book.txt‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,104 @@
6767
<hr>
6868
{{link.url}}
6969
<hr>
70+
71+
72+
<div id="content">
73+
<input type="file" id="thefile" accept="audio/*" />
74+
<canvas id="canvas"></canvas>
75+
<audio id="audio" controls></audio>
76+
</div>
77+
78+
window.onload = function() {
79+
80+
var file = document.getElementById("thefile");
81+
var audio = document.getElementById("audio");
82+
83+
file.onchange = function() {
84+
var files = this.files;
85+
audio.src = URL.createObjectURL(files[0]);
86+
audio.load();
87+
audio.play();
88+
89+
var context = new AudioContext();
90+
var src = context.createMediaElementSource(audio);
91+
var analyser = context.createAnalyser();
92+
93+
var canvas = document.getElementById("canvas");
94+
canvas.width = window.innerWidth;
95+
canvas.height = window.innerHeight;
96+
var ctx = canvas.getContext("2d");
97+
98+
src.connect(analyser);
99+
analyser.connect(context.destination);
100+
101+
analyser.fftSize = 256;
102+
103+
var bufferLength = analyser.frequencyBinCount;
104+
console.log(bufferLength);
105+
106+
var dataArray = new Uint8Array(bufferLength);
107+
108+
var WIDTH = canvas.width;
109+
var HEIGHT = canvas.height;
110+
111+
var barWidth = (WIDTH / bufferLength) * 2.5;
112+
var barHeight;
113+
var x = 0;
114+
115+
function renderFrame() {
116+
requestAnimationFrame(renderFrame);
117+
118+
x = 0;
119+
120+
analyser.getByteFrequencyData(dataArray);
121+
122+
ctx.fillStyle = "#000";
123+
ctx.fillRect(0, 0, WIDTH, HEIGHT);
124+
125+
for (var i = 0; i < bufferLength; i++) {
126+
barHeight = dataArray[i];
127+
128+
var r = barHeight + (25 * (i/bufferLength));
129+
var g = 250 * (i/bufferLength);
130+
var b = 50;
131+
132+
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
133+
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
134+
135+
x += barWidth + 1;
136+
}
137+
}
138+
139+
audio.play();
140+
renderFrame();
141+
};
142+
};
143+
144+
145+
146+
147+
down vote
148+
Here is the table of % to hex values E.g. For 85% white you would use #D9FFFFFF.
149+
150+
100% � FF
151+
95% � F2
152+
90% � E6
153+
**85% � D9**
154+
80% � CC
155+
75% � BF
156+
70% � B3
157+
65% � A6
158+
60% � 99
159+
55% � 8C
160+
50% � 80
161+
45% � 73
162+
40% � 66
163+
35% � 59
164+
30% � 4D
165+
25% � 40
166+
20% � 33
167+
15% � 26
168+
10% � 1A
169+
5% � 0D
170+
0% � 00

‎Django/MyDjangoApp/music/static/music/style.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,23 @@
9999
margin-top: 35%;
100100
}
101101

102-
#audioControler{
102+
#audioController{
103103
width: 80%;
104104
margin-left: 12%;
105105
}
106106

107+
#canvas{
108+
position:absolute;
109+
top: 24.2%;
110+
left:72.5%;
111+
width:100px;
112+
height:100px;
113+
/* border-radius: 50%; */
114+
background:rgba(0,0,0,.5);
115+
-webkit-transition:.5s ease all;
116+
z-index:10000;
117+
cursor:pointer;
118+
}
119+
107120

108121

‎Django/MyDjangoApp/music/templates/music/detail.html‎

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@
1010

1111

1212
<div id ="containerSong">
13+
<canvas id="canvas"></canvas>
1314
<img class="detail_album_logo" src = " {{ album.album_logo }} "><br>
1415
<div class="musicPlayerDiv">
1516
<div id="SongHeading">
1617
<h4 id="songName">Song name : </h4>
1718
<h4> Album title : {{ album.album_title }} </h4>
1819
<h4> Artist name : {{ album.artist }}</h4>
1920
</div>
20-
<audio controls id="audioControler">
21-
<source id ="audioPlayer" src="{{link.url}}/media/audio/song.mp3" type="audio/mpeg">
21+
<audio controls id="audioController">
22+
<source id ="audioPlayer" src="" type="audio/mpeg">
2223
Your browser does not support the audio element.
2324
</audio>
2425
</div>
@@ -27,23 +28,81 @@ <h4> Artist name : {{ album.artist }}</h4>
2728
<div class="songContainer">
2829
<div class="songList">
2930
{% for song in album.song_set.all %}
30-
<p class="song_title" onclick="setTitle('{{song.song_title}}','{{song.file_type}} ')">{{song.song_title}} </p>
31+
<li class="song_title" onclick="setTitle('{{song.song_title}}','{{song.file_type}} ')">{{song.song_title}} </li>
3132
{% endfor %}
3233
</div>
3334
</div>
3435

3536

37+
3638
<script type="text/javascript">
3739
var a = "{{album.album_title}}";
38-
songName = document.getElementById("songName");
39-
audioPLayer = document.getElementById("audioPlayer");
40+
var songName = document.getElementById("songName");
41+
var audioPLayer = document.getElementById("audioPlayer");
42+
var audioController = document.getElementById("audioController");
43+
var canvas = document.getElementById("canvas");
44+
var change = twoPi/objectsCount;
45+
var twoPi = 2*Math.PI;
46+
var objectsCount = 12;
47+
var radius = 150;
48+
49+
function visulation(audio)
50+
{
51+
var context = new AudioContext();
52+
var src = context.createMediaElementSource(audio);
53+
var analyser = context.createAnalyser();
54+
console.log(src);
55+
src.connect(analyser);
56+
// connect this to hear audio
57+
analyser.connect(context.destination);
58+
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
59+
var ctx = canvas.getContext("2d");
60+
analyser.fftSize = 256;
61+
62+
var bufferLength = analyser.frequencyBinCount;
63+
console.log(bufferLength);
64+
var dataArray = new Uint8Array(bufferLength);
65+
canvas.width = 150;
66+
canvas.height = 150;
67+
var WIDTH = canvas.width;
68+
var HEIGHT = canvas.height;
69+
70+
var barWidth = (WIDTH / bufferLength) * 2.5;
71+
var barHeight;
72+
var x = 0;
73+
var y = 0;
74+
// console.log(frequencyData);
75+
function renderFrame() {
76+
requestAnimationFrame(renderFrame);
77+
x = 0;
78+
y = 0;
79+
analyser.getByteFrequencyData(dataArray);
80+
81+
ctx.fillStyle = "#000";
82+
ctx.fillRect(0, 0, WIDTH, HEIGHT);
83+
84+
for (var i = 0; i < bufferLength; i++) {
85+
barHeight = dataArray[i];
86+
var r = barHeight + (25 * (i/bufferLength));
87+
var g = 256 * (i%bufferLength);
88+
var b = 50 ;
89+
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
90+
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
91+
x += barWidth + 1;
92+
}
93+
}
94+
audio.play();
95+
renderFrame();
96+
}
4097
function setTitle(title,titleSrc){
4198
console.log(titleSrc);
4299
songName.innerHTML = "Song name : "+title;
43100
audioPLayer.src = "{{link.url}}/"+titleSrc;
101+
audioController.load();
102+
// audioController.play();
103+
visulation(audioController);
44104
}
45-
46-
105+
47106
</script>
48107

49108

0 commit comments

Comments
 (0)