Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 21, 2024 - @973.89 (what is this?)
Forum activity rating: Three Stars Posts: 28/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :ha: :pc: Hello Melonland! :pc: :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  HELP: (Javascript) How do I make audio play when clicking an image?


« previous next »
Pages: [1] Print
Author Topic: HELP: (Javascript) How do I make audio play when clicking an image?  (Read 692 times)
OneMillionFurries
Full Member ⚓︎
***


Gettin silly with it

⛺︎ My Room

View Profile WWW

specimenThanks for being rad!:0 its one million furriesFirst 1000 Members!Joined 2023!
« on: June 21, 2023 @75.20 »

As the title says. I am trying to make an audio clip play when you click an image on my page, but I have never before used javascript so I am completely lost.

I am using the code from here but I am not actually sure what I'm doing. Here's what I've edited it to be:

Javascript
Code
    <!-- Baldhead Voice code start -->
    <script type="text/javascript">
      function playAudio(home/Baldhead Voices/1.mp3) {
        new Audio(home/Baldhead Voices/1.mp3).play();
        }
    </script>

HTML
Code
<img src="/graphics/sitegraphics/faust-winsmall2.gif"width="auto" height="250" onclick="playAudio('home/Baldhead Voices/1.mp3')">

Any help at all would be hugely appreciated!

P.S. if anyone could help me figure out how to play one of multiple voice lines randomly on click that would be SUPER awesome! Thank you in advance! :4u:

Edit: title edited to include "(Javascript)"
« Last Edit: June 21, 2023 @77.58 by OneMillionFurries » Logged


akesi
Casual Poster ⚓︎
*


⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #1 on: June 21, 2023 @135.66 »

so your issue is that you've replaced the variable with plain text, which confuses javascript. you'd want to do the following:

Code
    
<img src="/graphics/sitegraphics/faust-winsmall2.gif" width="auto" height="250" onclick="playAudio('home/Baldhead Voices/1.mp3')">

...

<!-- Baldhead Voice code start -->
<script type="text/javascript">
function playAudio(audioClip) {
    new Audio(audioClip).play();
}
</script>

brief explainer: "playAudio" is what programmers call a function. essentially you give functions inputs, and then they do something (in this case, it plays an audio clip). the inputs are variables. so you are setting the variable "audioClip" to have the value 'home/Baldhead Voices/1.mp3' when you set the function to activate when the onclick event happens

for playing a random sound, you could make an list, and each element in the list contains the path to each audio clip. then whenever you call the function, you can randomly choose one of the audio clips to play, like the following:

Code
<img src="/graphics/sitegraphics/faust-winsmall2.gif" width="auto" height="250" onclick="playAudio()">

<!-- Baldhead Voice code start -->
<script type="text/javascript">
const audioClipPaths = ["path/to/sound1.wav", "path/to/sound2.wav", "path/to/sound3.wav"]; 

function playAudio() {
  let index = Math.floor(Math.random() * 3);
  let audioClip = audioClipPaths[index]

  new Audio(audioClip).play();
}
</script>


so you should be able to use the above, just change the "path/to/sound1.wav" -- and keep the quotation marks! let me know if anything is unclear. excited to see what sorts of sounds a bald head makes
Logged
OneMillionFurries
Full Member ⚓︎
***


Gettin silly with it

⛺︎ My Room

View Profile WWW

specimenThanks for being rad!:0 its one million furriesFirst 1000 Members!Joined 2023!
« Reply #2 on: June 21, 2023 @151.59 »

so you should be able to use the above, just change the "path/to/sound1.wav" -- and keep the quotation marks! let me know if anything is unclear. excited to see what sorts of sounds a bald head makes

OMGGG it works!! tysmm! :D :transport: If ya wanna know what sorts of sounds a bald head makes, look for this guy on my website's homepage and do a clicky >:]
Logged


Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

what game do u want to play but havent yet?

Started by 2010Board ♖ ∙ Video Games

Replies: 72
Views: 8544
Last post September 15, 2024 @201.20
by Memory
An enemy from the game I'm trying to make

Started by Grafo VolaveruntBoard ➶ ∙ Art Gallery

Replies: 3
Views: 1705
Last post March 22, 2022 @61.42
by Grafo Volaverunt
GUIDE: How to make a Website!

Started by MelooonBoard ✁ ∙ Web Crafting

Replies: 1
Views: 2735
Last post March 14, 2023 @665.66
by Inkerlink

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi