HTML5 <audio> Random Audio - html

i'm back from nowhere.
I have something for school where we need to make a website.
Everyone in my class uses those easy drag 'n drop builders.
I'm ofcourse making it with Notepad++.
So, a 1990 looking page is ofcourse not enough with some fun music.
I have found around 3 to 4 Mario Bros online music to use.
But it only starts the first source link, never the others.
I want to know how to do it, Google doesn't really help.
This is my code:
<audio autoplay="autoplay" controls="controls" title="Radio implented by Rootel">
So my question is, how do I autoplay this list? I didn't give a full list of the music, sorry.

Here you can make it with javascript!
//javascript
var _player = document.getElementById("player"),
_playlist = document.getElementById("playlist"),
_stop = document.getElementById("stop");
// functions
function playlistItemClick(clickedElement) {
var selected = _playlist.querySelector(".selected");
if (selected) {
selected.classList.remove("selected");
}
clickedElement.classList.add("selected");
_player.src = clickedElement.getAttribute("data-ogg");
_player.play();
}
function playNext() {
var selected = _playlist.querySelector("li.selected");
if (selected && selected.nextSibling) {
playlistItemClick(selected.nextSibling);
}
}
// event listeners
_stop.addEventListener("click", function () {
_player.pause();
});
_player.addEventListener("ended", playNext);
_playlist.addEventListener("click", function (e) {
if (e.target && e.target.nodeName === "LI") {
playlistItemClick(e.target);
}
});
.selected {
font-weight: bold;
font-size:20px;
}
<!--html-->
<audio id="player"></audio>
<ul id="playlist"><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%201%20by%20Lionel%20Allorge.ogg">Space 1</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%202%20by%20Lionel%20Allorge.ogg">Space 2</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%203%20by%20Lionel%20Allorge.ogg">Space Lab</li></ul>
<button id="stop">Stop</button>
hope it helps!!!

Related

Can't make 2 buttons play 2 different songs on my HTML

Firstly, I'm super (SUPER) new to coding in general. I'm doing a college project for a site, and I wanted to make a certain page have 2 buttons that play songs, 2 different versions, one for each button. I copied the code from stack overflow, can't remember where but I'll be forever thankful for that one answer. I'm new to SO too so I hope I put the code here the right way :|
<!-- BTN1-->
<button id="ASong" onClick="playPause()" >
<audio
src="mp3/Persona_5_OST-_Beneath_the_Mask_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
<br/>
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
<!-- BTN1-->
<!-- BTN2-->
<button id="ASong2" onClick="playPause()" >
<audio
src="mp3/Persona_5_OST_-_Beneath_the_Mask_r_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
<br/>
</button>
<script>
var aud = document.getElementById("ASong2").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
<!-- BTN2-->
The only thing I really tried was changing the ID name for the second song. What happens is. I choose a button and click it first. That one button, with that specific song is the one that'll play (edit, it's not the first one I click, it's only one of the songs :/ it switched which one it was when I changed the ID name) , even if I try to press the other button afterwards. It's like both of them become the same button, they function the same. What I wanted is that each one of them worked separately. I want to be able to click, start one song, pause it, click on the other button and start the other song, which is not what's happening right now. I hope that makes sense D=
I'm going to modernize this a bit. Inline event handlers listeners are not the way to go these days. I'' use addEventListener instead.
Next, I'm going to use one lot of code to handle the actions. One concept to get used to as you learn to program is DRY: Don't Repeat Yourself. To facilitate the state of your playback I'll use a data attribute on the button
/*Get the buttons*/
document.querySelectorAll(".playPause").forEach(function(el) {
/*Add a click event listener*/
el.addEventListener("click", function() {
/*Get the first audio tag in the clicked button*/
var aud = this.querySelector("audio");
/*Check the data attirbute on the button if playing*/
if (this.dataset.isplaying === "true") {
/*Debug line*/
console.log("Pausing " + aud.src)
/*Change the status of the data attribute*/
this.dataset.isplaying = "false";
/*Pause the audio element*/
aud.pause();
} else {
/*Debug line*/
console.log("Playing " + aud.src)
/*Change the status of the data attribute*/
this.dataset.isplaying = "true";
/*PLay the audio element*/
aud.play();
}
})
});
<button id="ASong" class="playPause" data-isplaying="false">
<audio
src="mp3/Persona_5_OST-_Beneath_the_Mask_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
</button>
<button id="ASong2" class="playPause" data-isplaying="false">
<audio
src="mp3/Persona_5_OST_-_Beneath_the_Mask_r_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
</button>

Autoplay Sound in Chrome / Safari on hover 2018 2019?

I am wondering whether there is any way to overcome the new autoplay policy by Google.
I want to play a short sound snippet when a link is hovered, which unfortunately just works in Firefox and not in Chrome and Safari anymore.
Is there any way to find a work around for that problem?
Probably not I guess, just thought to address this question to more educated people in that field. Maybe someone has an idea.
That's the Code which works in Firefox and used to work in Chrome and Safari as well - but not anymore.
html
<span class="hit hitme">Just hit me up!</span>
<audio id="HitMe">
<source src="sound/hitmeup.mp3">
</audio>
jQuery
var audio = $("#HitMe")[0];
$(".hitme").mouseenter(function() {
audio.play()
$(".hitme").mouseleave(function() {
audio.pause();
});
});
Your question is short but there are actually many things to be said.
First off, it's always nice to use VanillaJSā„¢ instead of jQuery when it comes to policy changes, because standards get immediatly propagated to plain JavaScript, whereas it takes a while for the change to propagate up to third-party libs like jQuery. The nice thing with plain JavaScript is that you can create an audio object with new Audio(<source>) - no need for any HTML element! See below for an example:
const audio = new Audio("https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3");
// wait for the DOM to load
window.onload = () => {
// play audio on click
const clickToPlay = document.querySelector('#click-to-play');
clickToPlay.onclick = () => audio.play();
// play/pause audio on hover
const hoverToPlay = document.querySelector('#hover-to-play');
hoverToPlay.onmouseover = () => audio.play();
hoverToPlay.onmouseout = () => audio.pause();
}
/* just some styling, not useful for the solution */
#click-to-play {
padding: 1em;
background-color: steelblue;
}
#click-to-play:hover {
cursor: pointer;
}
#hover-to-play {
padding: 1em;
background-color: lightblue;
}
#hover-to-play:hover {
cursor: crosshair;
}
<div id="click-to-play">
Click to play
</div>
<div id="hover-to-play">
Hover in to play, hover out to pause
</div>
Great! Except, as you precised, the autoplay on hover that might be blocked by the 2017 update on autoplay in Chrome.
But it's not necessarily a bad thing. This update was made to make the web user experience better. If you're trying to find hacks on how to bypass it, you're doing it wrong ;) The update states that autoplay with sound is allowed if the user has interacted (eg with a click). Therefore, when designing your website, make sure the user clicks somewhere on your page before the autoplay appears. Here's an example with a two-steps click to authorize, hover to play user experience:
const audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
window.onload = () => {
const clickToAuthorize = document.querySelector('#click-to-authorize');
const hoverToPlay = document.querySelector('#hover-to-play');
clickToAuthorize.onclick = () => {
hoverToPlay.style.display = 'block';
}
hoverToPlay.onmouseover = () => audio.play();
hoverToPlay.onmouseout = () => audio.pause();
}
#click-to-authorize {
padding: 1em;
background-color: steelblue;
}
#click-to-authorize:hover {
cursor: pointer;
}
#hover-to-play {
padding: 1em;
background-color: lightblue;
display: none;
}
#hover-to-play:hover {
cursor: crosshair;
}
<div id="click-to-authorize">
Click if you want to hear a T-Rex roar!
</div>
<div id="hover-to-play">
Hover to play/pause
</div>

How to play sound automatically when hovered (using div)?

I am using this code:
{ box-sizing: border-box; }
.specific:hover { background-image: url("example.jpg"); color:white }
With this code I am using this for html:
div class="specific"
With these I can easily hover over a paragraph and the background image appears instantly. But I want a little bit more like when I will hover, it should play a sound (namely mp3 file) and when I will move away the cursor the sound will stop playing and when I will hover my cursor again the sound should play from the first not from where I left it.
I have seen a lot of similar posts but the code there, I cannot put them into my file.
You can do this very easily with an HTML audio tag with the built in JS methods, properties etc. See this page. Many people don't like W3Schools much but there's good information there and it's very straight forward. It would take a very small amount of JS/jQuery utilizing a hover event listener with the .play() and .pause() methods to make this happen.
Here's a simple tutorial using .play() and .pause().
I laboriously put together a fiddle for you. But seriously, try your own stuff.
HTML
<div class="specific">
Listen to some <i>music</i>...
</div>
JS
let specific = document.querySelector(".specific");
let audio = document.createElement("audio");
audio.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
document.body.appendChild(audio);
specific.onmouseover = () => {
audio.play();
}
specific.onmouseout = () => {
audio.pause();
}
You're welcome.
UPDATE
Updated fiddle: https://jsfiddle.net/dLxkhogy/21/
HTML
<div class="specific">
<p>
Listen to some <i>music</i>...
</p>
</div>
<div class="specific">
<p>
Listen to some more music...
</p>
</div>
<div class="specific">
<p>
Listen to even <i>more</i> music!
</p>
</div>
JS
let specifics = document.querySelectorAll(".specific");
let audios = ["https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"];
for(i = 0; i < specifics.length; i++){
let specific = specifics[i];
let audio = document.createElement("audio");
audio.src = audios[i];
document.body.appendChild(audio);
specific.onmouseover = () => {
audio.play();
}
specific.onmouseout = () => {
audio.pause();
audio.currentTime = 0;
}
}

How to make a button pattern?

I'm trying to make a little puzzle game in HTML5 and I'm having trouble figuring out how to make a puzzle. In the puzzle you have to click the squares in a certain order to beat it. I don't know how to make it to where you have to click the buttons in order and if you don't you'll lose.
<!DOCTYPE html>
<html>
<head>
<title>Room Two</title>
<link rel="stylesheet" type="text/css" href="youtubeGame.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Oxygen|Ubuntu|Coming+Soon">
</head>
<body>
<div id="content">
<h1 id="roomNum">Room 2</h1>
<p id="roomInfo">Once again the door seems to magically close behind
you.<br /> Unlike the stone floor from the previous room, this one is divided up
into wooden slabs.<br /> You press your foot onto a slab. It slides down, and an
arrrow shoots from the roof.<br /> You barely get out of the way but somehow you
dodge it. You tell yourself to watch your step...</p>
<p id="step"></p>
<p id="step2"></p>
<div class="menu-container" id="puzzle">
<div class="button-container">
1
2
3
4
5
6
7
8
9
</div>
</div>
</div>
<br><br>
<div id="death">
Try Again?
</div>
Next Room
<script type="text/javascript">
document.getElementById("death").style.display = "none";
document.getElementById("nextRoom").style.display = "none";
function correctStep1() {
return true;
}
function correctStep2() {
return true;
}
function correctStep3() {
return true;
}
function correctStep4() {
return true;
}
function correctStep5() {
return true;
}
function correctStep6() {
return true;
}
function correctStep7() {
return true;
}
function wrongStep() {
document.getElementById("content").style.display = "none;"
document.getElementById("puzzle").style.display = "none";
document.getElementById("death").style.display = "block";
document.getElementById("roomNum").innerHTML = "You Have
Died";
document.getElementById("roomInfo").style.display = "none";
}
</script>
</body>
</html>
Please help me fix this
A very simple way would be to save the correct order in an array and if the user clicks, increment a clickcounter and check if the clicked button is at this position in the array:
var state = {
clickedButtons:[]
};
var correctClickSettings = {
order:[7,8,9,6,5,2,3],
resetOn:7 // order has 7 elements, so the user have to click 7 buttons, after that it will be checked and the clicked buttons will be resolved or rejected
};
// called from every button that can be clicked to solve the game
function onClick(evt) {
evt = evt || window.event;
var sourceButtonText = this.innerText;
state.clickedButtons.push(sourceButtonText);
if(state.clickedButtons.length >= correctClickSettings.resetOn) {
var distanceBetweenArrays = state.clickedButtons.reduce((cur,val,idx)=>cur+Math.abs(val-correctClickSettings.order[idx]),0);
if(distanceBetweenArrays > 0) {
wrongStep();
state.clickedButtons = [];
} else {
alert('This was right!');
}
}
}
This solution has one problem: Everybody with a little bit of understanding for javascript can open the webpage and read out the solution. So if you want to do it a little better (not so easaly cheatable) you have to use another solution:
You can use a hash instead of an array of button clicks as correct order:
function simpleHash(currentHash, idx, sourceButtonText) {
currentHash = currentHash*137+parseInt(sourceButtonText,10);
}
Now simply calculate the correct solution value: 46672273550408 (in your case)
Now with every button click calculate the next hash and compare it after 7 steps with the solution.
This is a very similar approach to your current implementation, however uses attributes to declare the order of the options. It also does the binding of the events directly through javascript.
var options = [];
var expected = 0;
document.querySelectorAll('.button').forEach((button, index)=>{
options.push({
button: button,
order: button.getAttribute('order'),
index: index,
clicked: false
});
button.addEventListener('click',onClick);
//console.log(options[options.length-1]);
});
function onClick(event){
let order = parseInt(event.currentTarget.getAttribute('order'));
if(order == expected){
expected++;
options[order].clicked = true;
console.log(options[order]);
}
}
<div id="content">
<h1 id="roomNum">Room 2</h1>
<p id="roomInfo">Once again the door seems to magically close behind you.
<br /> Unlike the stone floor from the previous room, this one is divided up into wooden slabs.<br /> You press your foot onto a slab. It slides down, and an arrrow shoots from the roof.<br /> You barely get out of the way but somehow you dodge it.
You tell yourself to watch your step...</p>
<p id="step"></p>
<p id="step2"></p>
<div class="menu-container" id="puzzle">
<div class="button-container">
1
2
3
4
5
6
7
8
9
</div>
</div>
</div>
<br><br>
<div id="death">
Try Again?
</div>
Next Room

HTML 5 Drag and Drop in correct position

I am trying to make a simple educational game for kids, where they will drag and drop pictures of planets and need to put them in the correct boxes in the correct order.
What I'm trying to figure out is the JS needed to let check the element being dropped on a box is the one that will match that box. The code I have so far allows me to drag and drop but has no check. Here is what I have:
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
}
</script>
<section id="planetbox">
<img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif">
</section>
<section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"> </section>
Any help would be really great. P.S. needs to use HTML 5, CSS and JS only no libraries :)
I managed to solve my issue using the code below on the function drop(ev):
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
if ( image == ev.target.id) {
ev.target.appendChild(document.getElementById(image));
}
else {
}
}