Site Links
Home
Features
Documentation
Pricing & Order
Members Area
Support Options
UBBDev.com
UBBWiki.com
Who's Online Now
2 registered members (Crasher, JAISP), 75 guests, and 214 spiders.
Key: Admin, Global Mod, Mod
Member Spotlight
Daryl Fawcett
Daryl Fawcett
Canada
Posts: 563
Joined: June 2006
Show All Member Profiles 
Top Posters(30 Days)
isaac 42
M4TT 25
Ruben 24
Gizmo 17
Morgan 13
Latest Photos
Big stuff
Test
Testing to drag photos
Comfortable Cats
Test
Previous Thread
Next Thread
Print Thread
How to Add Sound Effects Modification #262503
03/10/19 07:02 PM
03/10/19 07:02 PM
M4TT  Offline OP
Journeyman
Joined: Mar 2015
Posts: 86
Canada, SK
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]
[Linked Image]
[Linked Image]
Express Hosting
Re: How to Add Sound Effects Modification [Re: M4TT] #262504
03/11/19 02:27 PM
03/11/19 02:27 PM
Ruben  Offline
Joined: Dec 2003
Posts: 5,866
Lutz,FL
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/19 10:27 AM
03/12/19 10:27 AM
Gizmo  Online Tapedshut
UBB.threads Developer
Joined: Jun 2006
Posts: 15,808
Portland, OR; USA
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/19 04:57 PM
03/12/19 04:57 PM
M4TT  Offline OP
Journeyman
Joined: Mar 2015
Posts: 86
Canada, SK
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]
[Linked Image]
[Linked Image]

ShoutChat Box
Today's Birthdays
No Birthdays
Recent Topics
How do I change stock button icons?
by M4TT - 03/24/19 10:19 PM
Can i go from 7.6.0 to 7.7.1 directly?
by Crasher - 03/21/19 12:15 PM
Follow Thread Button Not Aligned
by M4TT - 03/16/19 09:24 PM
Author Content Portrait Avatars
by M4TT - 03/16/19 09:12 PM
problem with ubbthreads dark scheme
by TheBrit - 03/15/19 04:17 PM
Forum Statistics
Forums35
Topics35,261
Posts192,306
Members12,145
Most Online978
Jun 24th, 2007
Random Image
Powered by UBB.threads™ PHP Forum Software 7.7.2
(Snapshot build 20190227)