<!DOCTYPE html>
<html>
<head>
<title>game</title>
<meta charset="UTF-8" />
<meta name="description" content="the description of my website" />
<link rel="stylesheet" href="main.css" />
<link rel="icon" href="" type="image/x-icon" />
</head>
<body>
<h1>Hover me !</h1>
<img src="/a.png" alt="" />
</body>
</html>
i tried to make audio visibilty and when i hover a photo add auto play atrr but i don't know how !
Notice "i only know HTML & CSS" Thx :)
No.
CSS has no features that can trigger an audio player.
It is not possible to play a sound on hover with CSS.
You need to access a specific function to trigger the play() function.
Here is a simple article https://css-tricks.com/play-sound-on-hover/
you can use the autoplay like this
<audio controls autoplay>
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
The browser does not support the audio element.
</audio>
Related
So I'm using the picture tag to show an image depending on the size of the screen... the problem I'm having is when none of the sources load the img should come in and be shown right? But this is no working it's just showing the alt attribute. Is there another way to do this or a way to fix it? Here's an example of what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width:650px)" srcset="invalid.jpg">
<source media="(min-width:465px)" srcset="invalid.jpg">
<img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg" alt="test">
</picture>
</body>
</html>
This other one is just to show that the above image url is valid:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width:650px)" srcset="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg">
<source media="(min-width:465px)" srcset="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg">
<img src="invalid" alt="test">
</picture>
</body>
</html>
you can use below way,
<img src="invalid" alt="test" onerror="this.setAttribute('srcset', 'https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg')">
another way in js,
const picture = document.querySelector("picture");
picture.addEventListener("error", function(event) {
// Check if the event target is the img tag
if (event.target.tagName === "IMG") {
// Load the default image
event.target.src = "fallback.jpg";
}
});
The given URL for the radio is https://karthigaifm.radioca.st/streams/64kbps
Stream type is Shoutcast
Port is 12000
I tried with this code, but it is not working.
<audio preload="none" autoplay="autoplay" controls="controls">
<source
src="https://karthigaifm.radioca.st/streams/64kbps;"
/>
</audio>
You need to remove the semicolon at the end of the src string. Like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Audio Test</title>
</head>
<body>
<audio preload="none" autoplay="autoplay" controls="controls" src="https://karthigaifm.radioca.st/streams/64kbps" />
</body>
</html>
I currently have a website with the following code:
<!DOCTYPE html>
<html>
<head>
<title>ProximityMC.com</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="logo"><img src="http://cravatar.eu/head/ProximityMC/500.png" alt="ProximityMC" /></div>
</div>
<audio loop autoplay>
<source src="mmm_yeah.mp3" type="audio/mpeg">
</audio>
</body>
</html>
That's okay but I am looking to put some other music on there so once the first song is played then the second one starts etc.
Many Thanks
You must write
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio elemet.
</audio>
I am playing vide in ipad it is working fine but i want that when user enter done button player should close any idea how to do this. i am using following code.
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<style>
body {margin:0;}
</style>
</head>
<body>
<video width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>
You can find FULL CODE here
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<script>
function onClickDone(){
document.getElementById('myvideotag').pause();
document.getElementById('myvideotag').style.display = "none";
}
</script>
<style>
body {margin:0;}
</style>
</head>
<body>
<button onclick="onClickDone()">Done</button>
<video id="myvideotag" width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>
I cannot for the life of me get the audio tag to work in IE9. Here is my code, what exactly am I doing wrong? I made sure my tags were all in order and I put an exception in to force IE9 to use HTML5. Thanks in advance for your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CD Cover Animation</title>
<script type="text/javascript" src="js/animCD.js?rev=new"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- Show Audio when button is clicked -->
<script type="text/javascript">
function showAudio()
{
document.getElementById('audioInterview').style.visibility='visible';
}
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<video autoplay="autoplay" id="videoBackground" width="1280" height="720" preload="auto" ontimeupdate="animCD_onprogress();">
<source id="colorVid_mp4" type="video/mp4" src="img/luther-2.mp4">
<source id="colorVid_ogg" type="video/ogg" src="img/luther-2.ogg">
</video>
<audio id="audioInterview" preload='auto' controls style="visibility:hidden"
<source src="audio/interview.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- <div class="buttonSkip" onclick="alert('Clicked Skip');"></div> -->
<p><a class="ex2" href="http://www.lrltv.org/muslims-nuclear.html">[ skip intro]</a></p>
<div id="buttonPlacement" class="buttonPlacement">
<div onclick="showAudio();" class="btnDonate"></div>
<div onclick="alert('Clicked Buy');" class="btnBuy"></div>
</div>
<!-- Add more buttons here -->
</body>
</html>
Like the comments say, you need to close the audio tag. But that they don't mean the </audio> but the > at the end of the line. It should look like this:
<audio id="audioInterview" preload="auto" controls="controls" style="visibility:hidden">
<source src="audio/interview.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
I also use the controls="controls".
If you don't need to show the audio control, you also do this in pure JavaScript.
var audioInterview = new Audio('audio/interview.mp3');
audioInterview.play();
And then remove the HTML audio tag.