Music playing in background HTML - 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>

Related

Can i play an audio on hover in css without JS?

<!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>

HTML video does not show

I tried the simplest example on Chrome:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>.</title>
<link rel="shortcut icon" href="surprise.png" type="image/x-icon">
<link rel="stylesheet" href="/styles/style.css">
</head>
<body>
<div class="overlay" id="overlay">
<div class="body">
<h2 class="bodytitle">Click "Yes"!</h2>
<div class="bodybutton">
<button id="accept-button" class="button">Yes</button><br>
<button id="decline-button" class="button1">No</button>
</div>
</div>
</div>
<div class="video">
<video id="video" class="scare" loop="" src="video.mp4">
</div>
<script src="/styles/style.js"></script>
</body>
</html>
I tried this on Chrome, it didn't show the video, and the console doesn't show any errors.
Any answers?
You can try this :
<video id="video" class="scare" loop="" src="video.mp4" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.mp4" type="video/ogg">
</video>

How can I play a online radio in html

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>

HTML Video not playing online in chrome but does play locally in chrome

<html>
<head>
<link rel="stylesheet" type="text/css" href="video.css">
</head>
<body>
<div id="banner" class="headerContent">
<div id="header">
<div id="headerContent" class="headerContent">
<video autoplay id="awsome_video" >
<source src="http://derrylahan.comze.com/promo.mp4" type="video/mp4">
</video>
<div class="overlay">
<h1 id="rowdy"> ROWDY RONDY ROUSEY </h1>
ENTER
</div>
</div>
</div>
</body>
</html>
This code works with another mp4 video but not this one any ideas ?
Thanks in advance for any help works fine off line but not on the server im using 000webhost free hosting
when I open inspect element on chrome and look at network I can see things loading then this message " Failed to write into a temp file: A requested file or directory could not be found at the time an operation was processed." is displayed at the bottom of the screen
also got this information from inspect element
Resource interpreted as Document but transferred with MIME type video/mp4: "http://derrylahan.comze.com/UFCR.mp4".
Navigated to http://derrylahan.comze.com/UFCR.mp4
Please check it out
<html>
<head>
<link rel="stylesheet" type="text/css" href="video.css">
</head>
<body>
<div id="banner" class="headerContent">
<div id="header">
<div id="headerContent" class="headerContent">
<video autoplay id="awsome_video" width="320" height="240" controls>
<source src="http://derrylahan.comze.com/promo.mp4" type="video/mp4">
</video>
<div class="overlay">
<h1 id="rowdy"> ROWDY RONDY ROUSEY </h1>
ENTER
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="video.css">
</head>
<body>
<div id="banner" class="headerContent">
<div id="header">
<div id="headerContent" class="headerContent">
<video autoplay id="awsome_video" width="320" height="240" controls>
<source src="http://derrylahan.comze.com/big.webm" type="video/webm">
</video>
<div class="overlay">
<h1 id="rowdy"> ROWDY RONDY ROUSEY </h1>
ENTER
</div>
</div>
</div>
</body>
</html>
there is something happening now with a video for testing but the video is at the end when the page loads and doesn't
play

Audio Tag Doesn't Work in IE9

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.