Adding Sound to Website

Wee Ric · Sep 20, 2013

hi there im not sure if this is correct place to post this sorry if i have posted in wrong section i am wondering if someone can help me out here.

I have a website and im looking to add sound till it so when a user gets mail it make a quick message tone. I don't want this to affect my webpage so users have to confirm to run it i just need it to run in background and play just once when user gets mail.

Can someone guide me in Right Direction

Thanks a lot for your time

EliteGM · Sep 20, 2013

Google's a great tool !

You must be registered to see links

Wee Ric · Sep 20, 2013

thanks i will play about with this and see how i get on thanks alot for your time

I used the onload meantime till i learn bit more i used this bit of code

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>

Only problem i have now is it pops up to many times any way i can change this ?

Mucski · Sep 21, 2013

Code:

<script>
    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'audio.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load();

        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);

        $('.play').click(function() {
            audioElement.play();
        });
});
</script>

But for Chrome you cant use .play() and .pause(). You must use .Play() and .Stop.

You must put this in the before the </body> or it doesn't work.

Joopie · Sep 21, 2013

mucski said:

Code:

<script>
    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'audio.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load()

        $.get();

        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);

        $('.play').click(function() {
            audioElement.play();
        });
});
</script>

You must put this in the before the </body> or it doesn't work.

Why the $.get();?

Mucski · Sep 21, 2013

Just an error , corrected now. Actually I think it was replacing " //audioElement.load()"

Wee Ric · Sep 22, 2013

still no joy yet

.

This bit of code will do if i can mod it.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>

only problem is i need it to popup once any ideas

EliteGM · Sep 22, 2013

I suggest you learn some basic javascript/using jquery

jur13n · Sep 22, 2013

html5 pl0x

Wee Ric · Sep 22, 2013

think i found one

You must be registered to see links

prity nice aswell

jur13n · Sep 22, 2013

pls.

You must be registered to see links

Wee Ric · Sep 22, 2013

I think i need to go for the one i found for now till i get look into javascript the html5 dosnt cover me for what i need it for. its ok if i needed to just add background music. I need to try and just get it to play notification sound just the once when user gets mail.

Sorry if you have give me correct stuff and im being a bit slow on it but im still trying to work all this out im new to all this coding and i always find the easy way round at the end of a long few weeks lol.

I will keep you all posted if i get this done lol

if i even use this html code :

<!DOCTYPE html>
<html>
<body>

<h2>Linking To a Song</h2>

<p><a href="horse.mp3">Click here to play the sound</a></p>

</body>
</html>

how can i use it to auto play with onload function

jur13n · Sep 22, 2013

Wee Ric said:
I think i need to go for the one i found for now till i get look into javascript the html5 dosnt cover me for what i need it for. its ok if i needed to just add background music. I need to try and just get it to play notification sound just the once when user gets mail.

Sorry if you have give me correct stuff and im being a bit slow on it but im still trying to work all this out im new to all this coding and i always find the easy way round at the end of a long few weeks lol.

I will keep you all posted if i get this done lol

if i even use this html code :

<!DOCTYPE html>
<html>
<body>

<h2>Linking To a Song</h2>

<p><a href="horse.mp3">Click here to play the sound</a></p>

</body>
</html>

how can i use it to auto play with onload function

that code will just link you to the file, and not all browsers can play sounds within the browser...

EliteGM · Sep 22, 2013

As I said. Please learn basic HTML and JS first.

2

jur13n · Sep 22, 2013

EliteGM said:
As I said. Please learn basic HTML and JS first.

2

This, it's pretty easy..

Wee Ric · Sep 23, 2013

all working thanks alot everyone

anyone know good place for tuts on java and ajax i always end up at w3schools but i dont find this to great as most of there code only works on ff or google chrome and takes good bit of modding most times to get it to work or is this normal.

sorry if is just me lol

jur13n · Sep 23, 2013

Wee Ric said:
all working thanks alot everyone

anyone know good place for tuts on java and ajax i always end up at w3schools but i dont find this to great as most of there code only works on ff or google chrome and takes good bit of modding most times to get it to work or is this normal.

sorry if is just me lol

That's just you.
The only thing I bumped into which won't work cross browser 24/7 is CCS3

Wee Ric · Sep 23, 2013

lol kk m8 i will look into it a bit more thanks alot

seems to be problem with the onload function
So far it works on FF here it is

echo "<a href=game.php?i=messages target=content><img src=images/mail.jpg border=0 onload='TCNWN.gotMail()'></a></td><td>(<b>$nummsgs</b>)<td><font $style2><b> |</b></font>";

and my javascript

<SCRIPT language="JavaScript">
var TCNWN = TCNWN || {};

(function(){
var Notifications = window.Notification;

if(Notifications) {
var notification = function() {
var nw = new Notifications("You've got mail", {
icon: "http://www.thecssninja.com/demo/web_notifications/icon.png",
body: "The CSS Ninja has sent you an email",
tag: 'got_mail'
});

nw.addEventListener("show", function() {
var audio = new Audio("youvegotmail.mp3");
audio.play();
}, false);

return nw;
};

TCNWN.gotMail = function() {
TCNWN.permission(notification);
};

TCNWN.permission = function(callback) {
Notifications.requestPermission(function(permission){
if(permission === "granted") {
callback();
} else {
alert("You'll need to allow permission in order for this demo to work");
}
});
};
} else {
if("webkitNotifications" in window) {
alert("Looks like you support the old web notifications, this demo uses latest spec only");
} else {
alert("You're browser doesn't support notifications.");
}
}
})();
</SCRIPT>

Any ideas why its not working on google chrome ?

FF screen :

You must be registered to see links

Google: Nothing at all

Thanks for your time

Wee Ric · Sep 23, 2013

im am learning and i was just looking feedback thanks for those who helped me get this far end of thread from me

jur13n · Sep 23, 2013

Wee Ric said:
lol kk m8 i will look into it a bit more thanks alot

seems to be problem with the onload function
So far it works on FF here it is

echo "<a href=game.php?i=messages target=content><img src=images/mail.jpg border=0 onload='TCNWN.gotMail()'></a></td><td>(<b>$nummsgs</b>)<td><font $style2><b> |</b></font>";

and my javascript

<SCRIPT language="JavaScript">
var TCNWN = TCNWN || {};

(function(){
var Notifications = window.Notification;

if(Notifications) {
var notification = function() {
var nw = new Notifications("You've got mail", {
icon: "http://www.thecssninja.com/demo/web_notifications/icon.png",
body: "The CSS Ninja has sent you an email",
tag: 'got_mail'
});

nw.addEventListener("show", function() {
var audio = new Audio("youvegotmail.mp3");
audio.play();
}, false);

return nw;
};

TCNWN.gotMail = function() {
TCNWN.permission(notification);
};

TCNWN.permission = function(callback) {
Notifications.requestPermission(function(permission){
if(permission === "granted") {
callback();
} else {
alert("You'll need to allow permission in order for this demo to work");
}
});
};
} else {
if("webkitNotifications" in window) {
alert("Looks like you support the old web notifications, this demo uses latest spec only");
} else {
alert("You're browser doesn't support notifications.");
}
}
})();
</SCRIPT>

Any ideas why its not working on google chrome ?

FF screen :
You must be registered to see links

Google: Nothing at all

Thanks for your time

want me to be honest?
it looks horrible, espescially that php of yours.
just that echo... Horrible.

oh btw, use [CODE ] [/CODE ] tags FOR CODE
(remove the spaces or use [PHP ] [/PHP ])

Thanks you for reading my post.
Pony's are cool

Adding Sound to Website

Newbie Spellweaver

The Gamma..?

Newbie Spellweaver

Legend

Magical Xenforo Unicorn

Legend

Newbie Spellweaver

The Gamma..?

Intelligent DoucheBag

Newbie Spellweaver

Intelligent DoucheBag

Newbie Spellweaver

Intelligent DoucheBag

The Gamma..?

Intelligent DoucheBag

Newbie Spellweaver

Intelligent DoucheBag

Newbie Spellweaver

Newbie Spellweaver

Intelligent DoucheBag

About Us

Online statistics

Forum statistics

RaGEZONE Sponsor