Web Page SOUND Tutorial
Adding Sound to your Webpages
This lesson will show you how to code your webpage to Play Sound...
Advantage of this method: (1) Users have a CHOICE to either listen or not... if you code to automatically play sound (using <bgsound> or <embed>), you will undoubtably lose many users who simply do NOT want to listen to your sound file... (2) No "helper application" such as Windows Media or Real Player has to open to play your sound file, so users are kept "in full view" of your webpage as the sound plays... (3) Compatable with IE, Firefox and Chrome plus many other web browsers...
NOTE: The <bgsound> is no longer useable and the <embed> element should not be used for proper coding, instead use the <audio> tag
The method to put Sound onto your webpage is to use the AUDIO HTML5 TAG
just click the "little arrow" ...
<source src="http://yourhost.com/ directory/file_name.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Note: The audio tag is not supported in Internet Explorer 8 and earlier versions, but will work on most HTML5 supported browsers, including Android Devices, and Tablets, and (probably) iPads or iPhones...
Please [SEE W3Schools Info Here] for more help...
Note: Browsers will NOT allow your audio file to automatically play, so the user has to click the little arrow to play the sound... however you can use Javascript and the addEventListener() method to get the sound to play automatically (say when the user scrolls the page) LOOK HERE for reference
HERE is the JS code I use on my EXAMPLE PAGE which I placed just inside of the beginning of the <body> tag
const playAudio = document.querySelector("audio");
var myListener = function () {
document.removeEventListener ('mousemove', myListener, false);
playAudio.play();
};
document.addEventListener ('mousemove', myListener, false);
window.addEventListener('scroll', () => {
const playAudio = document.querySelector("audio");
if (window.scrollY > 1) {
playAudio.play();
}
});
window.addEventListener ('mousemove', () => {
const playAudio = document.querySelector("audio");
playAudio.play();
});
</script>
Along with this (notice I chose to not display it on the page, plus I placed it just before the closing <body> tag
<audio controls autoplay style="height:25px;">
<source src="http://davmagic.com /furn/hello.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
This concludes our Tutorial on Adding Sound To A Webpage