Previous Thread
Next Thread
Print Thread
Hop To
Joined: Mar 2015
Posts: 96
Likes: 1
Journeyman
Journeyman
Joined: Mar 2015
Posts: 96
Likes: 1
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 imagizer.imageshack.com]
[Linked Image from aliendisc.net]
[Linked Image from aliendisc.net]
Joined: Dec 2003
Posts: 6,560
Likes: 78
Joined: Dec 2003
Posts: 6,560
Likes: 78
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
Joined: Jun 2006
Posts: 16,289
Likes: 115
UBB.threads Developer
UBB.threads Developer
Joined: Jun 2006
Posts: 16,289
Likes: 115
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.
Do you need Forum Install or Upgrade Services?
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!
Joined: Mar 2015
Posts: 96
Likes: 1
Journeyman
Journeyman
Joined: Mar 2015
Posts: 96
Likes: 1
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 imagizer.imageshack.com]
[Linked Image from aliendisc.net]
[Linked Image from aliendisc.net]

Link Copied to Clipboard
ShoutChat
Comment Guidelines: Do post respectful and insightful comments. Don't flame, hate, spam.
Recent Topics
Looking for a forum
by azr - 03/15/2024 11:26 PM
Editing Links in Post
by Outdoorking - 03/15/2024 9:31 AM
Question on barkrowler and the like
by Mors - 02/29/2024 6:51 PM
Member Permissions Help
by domspeak - 02/27/2024 6:31 PM
Forum Privacy Policy
by ECNet - 02/26/2024 11:58 AM
Who's Online Now
2 members (Geoff, domspeak), 353 guests, and 190 robots.
Key: Admin, Global Mod, Mod
Random Gallery Image
Latest Gallery Images
Los Angeles
Los Angeles
by isaac, August 6
3D Creations
3D Creations
by JAISP, December 30
Artistic structures
Artistic structures
by isaac, August 29
Stones
Stones
by isaac, August 19
Powered by UBB.threads™ PHP Forum Software 8.0.0
(Preview build 20230217)