Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 28, 2024 - @280.07 (what is this?)
Forum activity rating: Four Star Posts: 65/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :dive: Are u having fun?? :dive:

+  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 379 times)
OneMillionFurries
Jr. Member ⚓︎
**



View Profile WWW

First 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 ⚓︎
*



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
Jr. Member ⚓︎
**



View Profile WWW

First 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)

Ozwomps Voyage - Playable edition development journal!

Started by MelooonBoard ⚛︎ ∙ MelonLand Projects

Replies: 21
Views: 5211
Last post February 27, 2022 @128.44
by ellievoyyd
chiptune maker!

Started by cinniBoard © ∙ Music Room

Replies: 6
Views: 2064
Last post March 08, 2023 @308.04
by Gans
What are you playing (or have finished)?

Started by ObspogonBoard ♖ ∙ Video Games

Replies: 145
Views: 13460
Last post July 01, 2023 @725.98
by shevek

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


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