Skip to content

Commit 08d8574

Browse files
MahdiFMahdiF
committed
😍 simplifying a few things
1 parent ef2fea9 commit 08d8574

File tree

2 files changed

+111
-96
lines changed

2 files changed

+111
-96
lines changed

β€Žloudlinks-1.0.js

Lines changed: 110 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,125 @@
1-
// Create audio element and make it awesome
2-
generateAudioElement = function() {
3-
document.body.innerHTML += "<audio id='loudLinksAudioPlayer' preload='auto'><source id='mp3Source'><source id='oggSource'></audio>";
4-
}
5-
generateAudioElement();
1+
var loudlinks = (function(){
2+
3+
// Create audio element and make it awesome
4+
var generateAudioElement = (function() {
5+
var audioPlayer = document.createElement('audio'); // create the audio element
6+
audioPlayer.id = 'loudLinksAudioPlayer'; // give the audio element the proper id
7+
audioPlayer.preload = true; // audio element preload attribute
68

7-
// declaring stuff ---------------------------------------------
8-
var audioSrc;
9-
var soundMp3Link;
10-
var soundOggLink;
11-
var element;
9+
var source1 = document.createElement('source'); // creating a source element
10+
var source2 = document.createElement('source');
11+
source1.id = 'mp3Source';
12+
source2.id = 'oggSource';
1213

13-
var LoudLinksHover = document.getElementsByClassName('loud-link-hover');
14-
var LoudLinksClick = document.getElementsByClassName('loud-link-click');
15-
var audioPlayer = document.getElementById('loudLinksAudioPlayer');
16-
var mp3Location = 'sounds/mp3/'; // mp3 sounds location
17-
var oggLocation = 'sounds/ogg/'; // ogg sounds location
18-
var mp3Source = document.getElementById('mp3Source');
19-
var oggSource = document.getElementById('oggSource');
20-
// ------------------------------------------------------------
14+
audioPlayer.appendChild(source1); // appending the sources to the player element
15+
audioPlayer.appendChild(source2);
2116

22-
// check if the browser supports Audio Β―\_(ツ)_/Β―
23-
checkAudioSupport = function() {
24-
return !!document.createElement('audio').canPlayType;
25-
}
17+
document.body.appendChild(audioPlayer); // appending the player to the body
18+
})();
2619

27-
// get the audio source and appending it to <audio>
28-
getAudioSource = function(element) {
29-
var audioSrc = element.getAttribute('data-src'); // getting the sound name from the data-src Attribute
30-
var soundMp3Link = mp3Location + audioSrc + '.mp3'; // settnig the mp3 sound in a variable
31-
var soundOggLink = oggLocation + audioSrc + '.ogg'; // settnig the ogg sound in a variable
32-
mp3Source.setAttribute('src', soundMp3Link); // putting the mp3 sound link in the src Attribute of <source>
33-
oggSource.setAttribute('src', soundOggLink); // putting the mp3 sound link in the src Attribute of <source>
20+
// declaring stuff ---------------------------------------------
21+
var audioSrc;
22+
var soundMp3Link;
23+
var soundOggLink;
24+
var element;
3425

35-
oggSource.addEventListener('error', function(){
36-
console.log('😢 D\'oh! The β™ͺ ogg file URL is wrong!');
37-
}, false);
38-
mp3Source.addEventListener('error', function(){
39-
console.log('😢 D\'oh! The β™ͺ mp3 file URL is wrong!');
40-
}, false);
41-
}
26+
var LoudLinksHover = document.getElementsByClassName('loud-link-hover');
27+
var LoudLinksClick = document.getElementsByClassName('loud-link-click');
28+
var audioPlayer = document.getElementById('loudLinksAudioPlayer');
29+
var mp3Location = 'sounds/mp3/'; // mp3 sounds location
30+
var oggLocation = 'sounds/ogg/'; // ogg sounds location
31+
var mp3Source = document.getElementById('mp3Source');
32+
var oggSource = document.getElementById('oggSource');
33+
// ------------------------------------------------------------
4234

43-
// checking if the data-src Attribute isn't empty
44-
checkAttribute = function(element) {
45-
var audioSrc = element.getAttribute('data-src'); // getting the sound name from the data-src Attribute
46-
if (audioSrc) {
47-
return true;
48-
} else {
49-
return false;
35+
// check if the browser supports Audio Β―\_(ツ)_/Β―
36+
checkAudioSupport = function() {
37+
return !!document.createElement('audio').canPlayType;
5038
}
51-
}
5239

53-
// Play audio
54-
playAudio = function(element) {
55-
if (checkAttribute(element)) { // check if the data-src Attribute is filled (there is a name of a sound file)
56-
getAudioSource(element);
57-
audioPlayer.load();
58-
audioPlayer.play();
40+
// get the audio source and appending it to <audio>
41+
getAudioSource = function(element) {
42+
var audioSrc = element.getAttribute('data-src'); // getting the sound name from the data-src Attribute
43+
var soundMp3Link = mp3Location + audioSrc + '.mp3'; // settnig the mp3 sound in a variable
44+
var soundOggLink = oggLocation + audioSrc + '.ogg'; // settnig the ogg sound in a variable
45+
mp3Source.setAttribute('src', soundMp3Link); // putting the mp3 sound link in the src Attribute of <source>
46+
oggSource.setAttribute('src', soundOggLink); // putting the mp3 sound link in the src Attribute of <source>
47+
48+
oggSource.addEventListener('error', function(){
49+
console.log('😢 D\'oh! The β™ͺ ogg file URL is wrong!');
50+
}, false);
51+
mp3Source.addEventListener('error', function(){
52+
console.log('😢 D\'oh! The β™ͺ mp3 file URL is wrong!');
53+
}, false);
5954
}
60-
}
61-
// Stop audio
62-
stopAudio = function() {
63-
audioPlayer.pause();
64-
audioPlayer.currentTime = 0;
65-
}
6655

67-
// track the element to a certian action
68-
trackHover = function(element) {
69-
element.addEventListener('mouseover', function() { // play audio on hover
70-
playAudio(element);
71-
}, false);
72-
// --- all below to stop the sound ---- //
73-
element.addEventListener('mouseout', function() { // stop audio on mouse out
74-
stopAudio();
75-
}, false);
76-
element.addEventListener('touchmove', function() { // stop audio on touch and move
77-
stopAudio();
78-
}, false);
79-
element.addEventListener('click', function() { // stop audio on click
80-
stopAudio();
81-
}, false);
82-
element.addEventListener('dblclick', function() { // stop audio on double click
83-
stopAudio();
84-
}, false);
85-
}
56+
// checking if the data-src Attribute isn't empty
57+
checkAttribute = function(element) {
58+
var audioSrc = element.getAttribute('data-src'); // getting the sound name from the data-src Attribute
59+
if (audioSrc) {
60+
return true;
61+
} else {
62+
return false;
63+
}
64+
}
8665

87-
// track elements that'll have click event
88-
trackClick = function(element) {
89-
element.addEventListener('click', function() {
90-
playAudio(element);
91-
}, false);
92-
}
66+
// Play audio
67+
playAudio = function(element) {
68+
if (checkAttribute(element)) { // check if the data-src Attribute is filled (there is a name of a sound file)
69+
getAudioSource(element);
70+
audioPlayer.load();
71+
audioPlayer.play();
72+
}
73+
}
74+
// Stop audio
75+
stopAudio = function() {
76+
audioPlayer.pause();
77+
audioPlayer.currentTime = 0;
78+
}
9379

94-
// Go crazy! Scan all the links and see if they have the 'data-src' Attribute and do the events
95-
runTrackers = function() {
96-
for (var i = 0; i < LoudLinksHover.length; i++) { // Hover
97-
trackHover(LoudLinksHover[i]);
80+
// track the element to a certian action
81+
trackHover = function(element) {
82+
element.addEventListener('mouseover', function() { // play audio on hover
83+
playAudio(element);
84+
}, false);
85+
// --- all below to stop the sound ---- //
86+
element.addEventListener('mouseout', function() { // stop audio on mouse out
87+
stopAudio();
88+
}, false);
89+
element.addEventListener('touchmove', function() { // stop audio on touch and move
90+
stopAudio();
91+
}, false);
92+
element.addEventListener('click', function() { // stop audio on click
93+
stopAudio();
94+
}, false);
95+
element.addEventListener('dblclick', function() { // stop audio on double click
96+
stopAudio();
97+
}, false);
9898
}
99-
for (var i = 0; i < LoudLinksClick.length; i++) { // Click
100-
trackClick(LoudLinksClick[i]);
99+
100+
// track elements that'll have click event
101+
trackClick = function(element) {
102+
element.addEventListener('click', function() {
103+
playAudio(element);
104+
}, false);
105+
}
106+
107+
// Go crazy! Scan all the links and see if they have the 'data-src' Attribute and do the events
108+
runTrackers = function() {
109+
for (var i = 0; i < LoudLinksHover.length; i++) { // Hover
110+
trackHover(LoudLinksHover[i]);
111+
}
112+
for (var i = 0; i < LoudLinksClick.length; i++) { // Click
113+
trackClick(LoudLinksClick[i]);
114+
}
115+
}
116+
117+
// Check if the browser supports audio then get crazy!
118+
if (checkAudioSupport()){
119+
console.log('Audio works like a charm πŸ‘');
120+
runTrackers();
121+
} else {
122+
console.log('Oh man 😩! \nI\'m sorry but your browsers doesn\'t support awesomeness.')
101123
}
102-
}
103124

104-
// Check if the browser supports audio then get crazy!
105-
if (checkAudioSupport()){
106-
console.log('Audio works like a charm πŸ‘');
107-
runTrackers();
108-
} else {
109-
console.log('Oh man 😩! \nI\'m sorry but your browsers doesn\'t support awesomeness.')
110-
}
125+
})();

β€Žloudlinks-1.0.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
Β (0)