I'm trying out new things for my website which involve when I hover, click or release a link I interact with it should play a sound. I am still getting used to the basics of HTML, sorry if I seem confused but I thought this would have been the right direction.
This is what I have so far:
<html>
<audio id="myaudio" src="hover"></audio>
<audio id="myaudio2" src="click"></audio>
<audio id="myaudio3" src="release"></audio>
<body>
<a href="https://google.com"
onmouseover="document.getElementById('myaudio').play()"
onmousedown="document.getElementById('myaudio2').play()"
onmouseup="document.getElementById('myaudio3').play()">google.com</a>
</body>
</html>
#guest271314 helped me with this one, turns out it was really easy.
I forgot that the SRC tag needs to point to a link. Here is the correction:
<html>
<audio id="myaudio" src="http://yourdomain.com/hover.wav"></audio>
<audio id="myaudio2" src="http://yourdomain.com/click.wav"></audio>
<audio id="myaudio3" src="http://yourdomain.com/release.wav"></audio>
<body>
google.com
</body>
</html>
Here's the part fixed:
src="http://yourdomain.com/sound.wav"
In order to make your web page plays music, the html code can be as simple as
<audio id="myaudio" src="c.mp3" controls></audio>
Related
I am testing a script that would essentially let me pull the video source URL through ajax and change the video source to try to hide the source of my video files from users (basically dont want people downloading my content).
I have no issues getting the ajax to work, but the "replaceChild" command doesnt seem to be doing anything for me. I stripped out all the ajax and tried to run a basic function calling this command with "alerts" along the way to show me what is working and what is not, it appears to me that the replaceChild command is not working.
Can anyone spot any issues with my code or offer alternate solutions?
<!DOCTYPE html>
<html>
<head>
<title>Test Script</title>
<meta name="robots" content="noindex,nofollow">
<script type="text/javascript">
function testFunction(){
var video = document.getElementById("video2").getElementsByTagName("source")[0];
var source = "realvideo.mp4";
clone = video.cloneNode(true);
alert(clone.src);
clone.setAttribute("src",source);
alert(clone.src);
video.parentNode.replaceChild(clone,video);
alert(video.src);
}
</script>
</head>
<body onLoad="testFunction()">
<div align="center">
<video id="video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="realvideo.mp4" type="video/mp4">
</video>
</div>
<div>
<video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="sorry.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
That code alerts "sorry.mp4", "realvideo.mp4", "sorry.mp4"
This is expected behaviour. When you call:
video.parentNode.replaceChild(clone,video);
video will not suddenly become a different element. It will still have the same src attribute as before. video is detached from the document by the above replaceChild call, and clone is injected in its stead... it's an in/out swap. So you should not expect that video still references the element in the document and becomes the same reference as clone.
To really verify the change you could end your function with this code:
video = document.getElementById("video2").getElementsByTagName("source")[0];
alert(video.src);
I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.
I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
I suppose its a common question, but none of the tutorials and post I've seen have helped me so far. What I want its a sound to play whenever the cursor is over a menu image which is also a link. There's already another instruction in the onmouseover event for the image to flicker, but I've read that the event can have multiple instructions. Here's the code
(sorry if it looks messy)
<html>
<head>
<script type="text/javascript">
var sonido=document.getElementById("neonclip");
</script>
</head>
<body>
<audio id="neonclip">
<source src="http://www.eleyte.net/portafolio/neon.mp3" type="audio/mp3"/>
</audio>
<div style="text-align: center; margin-top: 130px;">
<a href="pagelink">
<img onmouseover="this.src='img2';
sonido.play(document.getElementById('neonclip'))
onmouseout="this.src='img1'"src="img1"/> </a>
</div>
</body>
</html>
I did this following an example but it didn't work. I know it'll have problems in firefox because it doesnt support mp3 format, but thats another story. Thanks in advance!
Just user below two format to play sound in all browsers.
<audio preload id="neonclip">
<source src="sounds/dingdong/57718^DingDong.mp3" type="audio/mpeg">
<source src="sounds/dingdong/dingdong.ogg" type="audio/ogg">
</audio>
And to play the sound try this
<a href="pagelink">
<img onmouseover="this.src='img2'; document.getElementById('neonclip').play()" onmouseout="this.src='img1'"src="img1"/> </a>
i have written some simple html and javascript that should play a sound file. The page displays the two buttons but when i click the play button it does nothing . I know that my browser can play my mp3 file because it works with just the audio tag ex:
<audio src="soundtest.mp3" ></audio>
If anyone could tell me what i am doing wrong i would greatly appreciate it.
<!DOCTYPE html>
<html>
<body>
<button onclick="playSong()" type="button">play</button>
<button onclick="pauseSong()" type="button">pause</button>
<br>
<audio id="audio1">
<source src="soundtest.mp3" type="audio/mp3" >
Your browser does not support the audio tag!
</audio>
<script>
var mySong=document.getElementById("audio1");
function playSong()
{
mySong.play();
}
function pauseSong()
{
mySong.pause();
}
</script>
</body>
</html>
There are a few things to try. First and foremost, check mySong.canPlayType("audio/mpeg"). It should return "maybe". If it does not, your browser doesn't support MP3 and you should try a different one.
Then, the <audio> tag's type attribute should be audio/mpeg, not audio/mp3. MIME type is important.
So important, in fact, that if it still doesn't work you should check to ensure that the server is configured to serve .mp3 files with the audio/mpeg MIME type header.
If this still doesn't work... try turning the speakers on :p I'm kidding, if you still have problems after these steps, let me know.