Skip to content

Commit 91f529f

Browse files
aaryansr26KendallDoesCoding
aaryansr26
and
KendallDoesCoding
authored
Feat: Play music in background instead of redirecting to YouTube (#44)
* fix for music playing in background * changed mp3 filename * chore: add Music controls to add the files. * chore: remove controls from main page. * chore: update titles The titles for some pages were wrong, so I fixed them * chore: state that google setting must be active --------- Co-authored-by: KendallDoesCoding <kendalldoescoding@gmail.com>
1 parent c0a2a8c commit 91f529f

File tree

18 files changed

+203
-1
lines changed

18 files changed

+203
-1
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@ I made this quiz, following a YouTube tutorial online by [Brian Designs](https:/
66

77
I would like to give a big shoutout to [@Hacikoi-the-creator](https://github.com/Hachikoi-the-creator) who made a huge revamp to this project (in v8.0.0)[Pull Request #29](https://github.com/KendallDoesCoding/quiz/pull/29).
88

9+
## Important
10+
Incase, music isn't playinf for you, please do the following steps:
11+
- Head over to to Google Sound Settings - https://chrome://settings/content/sound?search=Sound
12+
- Set it to "Sites can play sound"
13+
14+
The issue should be fixed. Incase of any further issue, please file a [Bug Report](https://github.com/KendallDoesCoding/quiz/issues/new?assignees=&labels=%F0%9F%9B%A0+goal%3A+fix&template=bug.yml).
15+
916
# Links and Topics
1017

1118
[Tutorial Video](https://www.youtube.com/watch?v=f4fB9Xg2JEY)

‎css/index.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ h2 {
2929
display: flex;
3030
flex-direction: column;
3131
}
32+
.flex-row {
33+
display: flex;
34+
flex-direction: row;
35+
}
3236

3337
.flex-center {
3438
justify-content: center;
@@ -221,3 +225,26 @@ input::placeholder {
221225
.go-back {
222226
color: rgb(59, 196, 255) !important;
223227
}
228+
229+
.button1 {
230+
background-color: #4CAF50; /* Green */
231+
border: none;
232+
color: white;
233+
padding: 15px 32px;
234+
text-align: center;
235+
text-decoration: none;
236+
display: inline-block;
237+
font-size: 16px;
238+
239+
}
240+
.button2 {
241+
background-color: red;
242+
border: none;
243+
color: white;
244+
padding: 15px 32px;
245+
text-align: center;
246+
text-decoration: none;
247+
display: inline-block;
248+
font-size: 16px;
249+
250+
}

‎music/AVeryMogulChristmas.mp3‎

27 MB
Binary file not shown.

‎music/music.mp3‎

2.3 MB
Binary file not shown.

‎pages/browsers/game.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
8+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
79

810
<title>Quiz Page - Browsers</title>
911

@@ -57,6 +59,16 @@ <h1 id="question">What is the answer to this question</h1>
5759
</div>
5860
</div>
5961
</div>
62+
<div class="music">
63+
<audio loop="loop" id="my_audio" preload="auto" autoplay>
64+
<source src="/music/music.mp3" type="audio/mpeg" autoplay>
65+
</audio>
66+
67+
<div class="music-container flex-center flex-row">
68+
<a onclick="document.getElementById('my_audio').play()" class="button1"> Music On <i class="fas fa-light fa-headphones"></i></a>
69+
<a onclick="document.getElementById('my_audio').pause()" class="button2"> Music Off <i class="fas fa-light fa-volume-off"></i></a>
70+
</div>
71+
</div>
6072
</body>
6173

6274
</html>

‎pages/christmas/game.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
8+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
79

810
<title>Quiz Page - Christmas</title>
911

@@ -57,6 +59,16 @@ <h1 id="question">What is the answer to this question</h1>
5759
</div>
5860
</div>
5961
</div>
62+
<div class="music">
63+
<audio loop="loop" id="my_audio" preload="auto" autoplay>
64+
<source src="/music/AVeryMogulChristmas.mp3" type="audio/mpeg" autoplay>
65+
</audio>
66+
67+
<div class="music-container flex-center flex-row">
68+
<a onclick="document.getElementById('my_audio').play()" class="button1"> Music On <i class="fas fa-light fa-headphones"></i></a>
69+
<a onclick="document.getElementById('my_audio').pause()" class="button2"> Music Off <i class="fas fa-light fa-volume-off"></i></a>
70+
</div>
71+
</div>
6072
</body>
6173

6274
</html>

‎pages/countries/game.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
8+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
79

810
<title>Quiz Page - Countries</title>
911

@@ -57,6 +59,16 @@ <h1 id="question">What is the answer to this question</h1>
5759
</div>
5860
</div>
5961
</div>
62+
<div class="music">
63+
<audio loop="loop" id="my_audio" preload="auto" autoplay>
64+
<source src="/music/music.mp3" type="audio/mpeg" autoplay>
65+
</audio>
66+
67+
<div class="music-container flex-center flex-row">
68+
<a onclick="document.getElementById('my_audio').play()" class="button1"> Music On <i class="fas fa-light fa-headphones"></i></a>
69+
<a onclick="document.getElementById('my_audio').pause()" class="button2"> Music Off <i class="fas fa-light fa-volume-off"></i></a>
70+
</div>
71+
</div>
6072
</body>
6173

6274
</html>

‎pages/disney/game.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
8+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
79

810
<title>Quiz Page - Disney</title>
911

@@ -57,6 +59,16 @@ <h1 id="question">What is the answer to this question</h1>
5759
</div>
5860
</div>
5961
</div>
62+
<div class="music">
63+
<audio loop="loop" id="my_audio" preload="auto" autoplay>
64+
<source src="/music/music.mp3" type="audio/mpeg" autoplay>
65+
</audio>
66+
67+
<div class="music-container flex-center flex-row">
68+
<a onclick="document.getElementById('my_audio').play()" class="button1"> Music On <i class="fas fa-light fa-headphones"></i></a>
69+
<a onclick="document.getElementById('my_audio').pause()" class="button2"> Music Off <i class="fas fa-light fa-volume-off"></i></a>
70+
</div>
71+
</div>
6072
</body>
6173

6274
</html>

‎pages/easter/game.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
8+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
79

810
<title>Quiz Page - Easter</title>
911

@@ -57,6 +59,16 @@ <h1 id="question">What is the answer to this question</h1>
5759
</div>
5860
</div>
5961
</div>
62+
<div class="music">
63+
<audio loop="loop" id="my_audio" preload="auto" autoplay>
64+
<source src="/music/music.mp3" type="audio/mpeg" autoplay>
65+
</audio>
66+
67+
<div class="music-container flex-center flex-row">
68+
<a onclick="document.getElementById('my_audio').play()" class="button1"> Music On <i class="fas fa-light fa-headphones"></i></a>
69+
<a onclick="document.getElementById('my_audio').pause()" class="button2"> Music Off <i class="fas fa-light fa-volume-off"></i></a>
70+
</div>
71+
</div>
6072
</body>
6173

6274
</html>

‎pages/football/game.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
8+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
79

810
<title>Quiz Page - Football</title>
911

@@ -58,6 +60,16 @@ <h1 id="question">What is the answer to this question</h1>
5860
</div>
5961
</div>
6062
</div>
63+
<div class="music">
64+
<audio loop="loop" id="my_audio" preload="auto" autoplay>
65+
<source src="/music/music.mp3" type="audio/mpeg" autoplay>
66+
</audio>
67+
68+
<div class="music-container flex-center flex-row">
69+
<a onclick="document.getElementById('my_audio').play()" class="button1"> Music On <i class="fas fa-light fa-headphones"></i></a>
70+
<a onclick="document.getElementById('my_audio').pause()" class="button2"> Music Off <i class="fas fa-light fa-volume-off"></i></a>
71+
</div>
72+
</div>
6173
</body>
6274

6375
</html>

0 commit comments

Comments
 (0)