Previous Thread
Next Thread
Print Thread
Hop To
How to Add Sound Effects Modification #262503 03/10/2019 7:02 PM
Joined: Mar 2015
Posts: 87
M4TT Offline OP
Journeyman
OP Offline
Journeyman
Joined: Mar 2015
Posts: 87
Hi guys,

So I modified UBB.threads to make a sound when a mouse cursor hovers over any chosen hyperlinks and a different sound effect when it is tapped on a mobile phone or clicked with a mouse cursor.

Here is how to do it if anyone is interested in this modification.

Insert this code into your Display > General > HTML Includes > Header Insert For All Pages:

Code
<meta charset='UTF-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


Insert this code into Display > Templates > header.tpl at the very end:

Code
<!-- Audio Hover Element -->

<audio id="audioID">
  <source src="https://YourDomain.com/audio/SoundFileName.ogg" type="audio/ogg">
  <source src="https://YourDomain.com/audio/SoundFileName.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>var audio1 = document.getElementById("audioID");

function playAudio() {
  audio1.play();
}</script>

<!-- Audio Clicked Element  -->

<audio id="audioID2">
  <source src="https://YourDomain.com/audio/SoundFileNameTwo.ogg" type="audio/ogg">
  <source src="https://YourDomain.com/audio/SoundFileNameTwo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>var audio2 = document.getElementById("audioID2");

function playAudio2() {
  audio2.play();
}</script>


*Change the source to your sound file locations.

Finally,

Insert this code into your hyperlink HTML code. Example:

Code
<a href="https://YourDomain.com" onmouseenter="playAudio()" onclick="audio2.play()"><b>Home</b></a>


I'm just testing how it goes with sound effects with the breadcrumbs and navigation of the forums so as to not get carried away with it.

You can try it on my forums here if you'd like. It has been tested on Google Chrome, Internet Explorer, and on my Huawei Mate Pro 20 smartphone.


[Linked Image from aliendisc.net]
[Linked Image from aliendisc.net]
[Linked Image from aliendisc.net]
Express Hosting
Re: How to Add Sound Effects Modification [Re: M4TT] #262504 03/11/2019 2:27 PM
Joined: Dec 2003
Posts: 5,940
Ruben Offline
Offline
Joined: Dec 2003
Posts: 5,940
Nice,
For future reference.
Other than modifying the html includes, If you edit any source code that makes it a non stock release . Such as template files
It is suggested to post same at ubbdev.com
The reason is if somebody upgraded ubb all the code will be lost.
That site is all about modifications where this site is support for stock code only.

I know people break the rules all the time , But that is the way this site and ubbdev.com coexist.
Ubbdev.com is for breaking the source code per say.

In fact a lot of features in the stock code now came from ubbdev.com


Blue Man Group
There is no such thing as stupid questions. Just stupid answers
Re: How to Add Sound Effects Modification [Re: M4TT] #262505 03/12/2019 10:27 AM
Joined: Jun 2006
Posts: 15,848
Gizmo Offline
UBB.threads Developer
Offline
UBB.threads Developer
Joined: Jun 2006
Posts: 15,848
One thing to keep in mind, with regards to sounds, you may be alienating (no pun intended) your mobile userbase (which for me makes up about 75% of my users); I for one do not go back to sites which play sounds on my mobile device, even if its a transitional noise. They're annoying, encourage me to turn my sounds down, play over my Bluetooth speakers, and play over my music.

As for placement of coding, this goes for both of your threads here; you don't have to modify everything just because you can. Items at the top and bottom of UBB.threads (and meta/script/style tags) can all be inserted through HTML Includes, and CSS entries should be added to your styles (or at the very least, an HTML include). Placing coding in these open areas allows you way easier management of these tags when changes need to occur; vs having to tear through files at a later date.

As for "how to" on injecting 3rd party code into UBB.threads, other than pointing to the location where you should be placing data, modifying the base code is beyond the scope of this site; modifications to the base code are not supported in any way, and modified forums do not qualify for helpdesk support.


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Need to Upgrade?
Forums: A Gardeners Forum Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Re: How to Add Sound Effects Modification [Re: M4TT] #262506 03/12/2019 4:57 PM
Joined: Mar 2015
Posts: 87
M4TT Offline OP
Journeyman
OP Offline
Journeyman
Joined: Mar 2015
Posts: 87
I agree! I've only applied the sounds to a few hyperlinks as to test and see how the users feel about it. I'm thinking by default, there will be no sound effects, but the sounds can be turned on with an option to do so... Thanks for the advice and tips Gizmo!


[Linked Image from aliendisc.net]
[Linked Image from aliendisc.net]
[Linked Image from aliendisc.net]

Additional Resources
UBB Developers
UBB Wiki
ShoutChat Box
Comment Guidelines: Do post respectful and insightful comments. Don't flame, hate, spam.
Recent Topics
Strange Merge Issue
by Baldeagle - 08/16/2019 3:37 PM
Formatting Links
by Ty Griffin - 08/13/2019 4:39 PM
Changing from iso-8859-1 to UTF-8?
by Daryl Fawcett - 08/13/2019 9:58 AM
Threaded Mode
by ToddUGA - 08/10/2019 9:18 PM
Who's Online Now
3 registered members (Baldeagle, ECNet, SD), 57 guests, and 200 spiders.
Key: Admin, Global Mod, Mod
Member Spotlight
dslam
dslam
NJ
Posts: 50
Joined: May 2007
Show All Member Profiles 
Forum Statistics
Forums34
Topics35,320
Posts192,716
Members11,865
Most Online2,569
Jul 27th, 2019
Random Gallery Image
Latest Photos
The Sky
Land Rocks
Cozy Places
Trees
Powered by UBB.threads™ PHP Forum Software 7.7.3