Basically if you hover over the anchor it plays the song and when you take it off it pauses it. I want it to pause and reset instead of just pause.
Heres my html
<a onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()" style="display:block" href="MainPage.html">
<div id="box">
<audio id="mysound" src="C:/Programming/My Website/Audio/Stalker.mp3"></audio>
<p id="text"> Enter The Disco! </p>
</div>
</a>
also i would like to have the javascript in a seperate file.
This should work:
document.getElementById('mysound').currentTime = 0;
You can just add it right into your code:
<a onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause(); document.getElementById('mysound').currentTime = 0;" style="display:block" href="MainPage.html">
<div id="box">
<audio id="mysound" src="C:/Programming/My Website/Audio/Stalker.mp3"></audio>
<p id="text"> Enter The Disco! </p>
</div>
</a>
Related
I'm currently working on a website that has a series of twelve HTML5 videos that starts playing automatically in a separate modal box for each video. Now I want to give the user the control to play and pause the video as well (along with other features but that's not relevant to my current problem).
I've gotten so far that the user are able to click the video itself in order to play and pause it. But the play/pause button i've added does not work right now and the code below will give me a "lastClicked.pause is not a function" error.
I know that the reason is because the lastClicked variable i'm using as a condition inside the if statement will contain a button when I click "play/pause" and a button does not have those functions. I've figured out that much so far, but I'm a bit lost of what my next step should be.
Should I make a reference to the specific video inside the toggleVideo function and replace it with the lastClicked variable or does a more simple solution exist?
EDIT: Added a bit of the HTML for reference
Javascript:
// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");
let lastClicked
function toggleVideo () {
lastClicked = this;
if(lastClicked.paused) {
lastClicked.play();
}
else {
lastClicked.pause();
}
}
// Two different ways to play/pause the video - Clicking the video
// itself and clicking the play/pause button
player.forEach(video => video.addEventListener ("click", toggleVideo ));
toggle.forEach(button => button.addEventListener ("click", toggleVideo ));
HTML:
<section class="portfolio" id="portfolio">
<div class="video-wrapper">
<div class="video-thumbnail"><img src="./media/img/thumbnails/1.hammerfall.jpg"></div>
<button class="video-overlay" id="player" data-modal="videoOne"></button>
</div
><div class="modal-box">
<div class="modal-content">
<span class="close-btn">×</span>
<div class="player">
<video class="player__video viewer" src="./media/video/1.waves.mp4"></video>
<div class="video-controller">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
<button class="video-play toggle">►</button>
<input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
<button class="video-volume mute">X</button>
</div>
</div>
</div>
</div
><div class="video-wrapper">
<div class="video-thumbnail"><img src="./media/img/thumbnails/2.lordi.jpg"></div>
<button class="video-overlay" data-modal="videoTwo"></button>
</div
><div class="modal-box">
<div class="modal-content">
<span class="close-btn">×</span>
<div class="player">
<video class="player__video viewer" src="./media/video/2.words.mp4"></video>
<div class="video-controller">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
<button class="video-play toggle">►</button>
<input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
<button class="video-volume mute">X</button>
</div>
</div>
</div>
</div
>
</section>
Essentially you need to associate your buttons with your videos.
Currently toggleVideo() assumes that it's running in the context of a video element, whereas it could be a video or a button associated with a video.
You don't know show your HTML structure, but for this answer I'll use the following video-button relationship.
<div>
<video />
<button>Toggle</button>
</div>
...ergo in my contrived example, the button is the next sibling of the video. It doesn't matter what the precise relationship is between video and button, merely that we establish and cater for it inside toggleVideo().
So, that now becomes:
function toggleVideo () {
//establish video - might be #this, or might be prev sibling of #this
let vid = this.tagName == 'VIDEO' ? this : this.previousSibling;
lastClicked = vid;
vid.paused ? vid.play() : vid.pause();
}
<html>
<title>Self4You</title>
<body bgcolor="yellow">
<center>
<img width="250px" src=http://self4you.pt/assets/img/678.png></img>
<h1 style="font-family:verdana;">
Tire a sua Senha.
</h1>
<a id="ticket" href="com.fidelier.printfromweb://$intro$$bighw$ Self4You$intro$$small$ Sua Vez: $intro$$bighw$ >counter< $intro$$intro$$intro$$intro$">
<input type="image" src="http://bsccongress.com/im6/white-circle-button-clip-art.png">
</a>
</center>
</body>
</html>
Is it possible to change the content of the tag "ticket"?
I want to replace ">counter<" with a number everytime i click the image.
i'll apreciate any help.
thanks
I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.
I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.
I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/
I have put together a d3 visualisation on codepen where it runs as planned:
https://codepen.io/MrVincentRyan/pen/oJLNrV?editors=1010
However when I add additional styling with HTML and CSS the line element no longer appears:
https://codepen.io/MrVincentRyan/pen/VqKLbm?editors=1010
HTML:
<head>
</head
<body>
<div class="intro">
<div class="flexwrap">
<div class="headline">
<div class="topline">
<!-- <time class="date">01.03.2018</time> -->
<h1 class="title">The sound of the pound</h1>
<h3 class="introtext">From flash crashes, to snap elections, the pound has been rattling around currency markets as Brexit threatens to play a new tune with the UK's economy.</h3>
</div>
<div id="audioviz">
<button id="buttons" onclick="playAudio()" id="start">Start</button>
<button id="buttons" onclick="audio.stop()" id="reset">Reset</button>
</div>
<audio id="myAudio">
<source src="https://res.cloudinary.com/dxeddkkwh/video/upload/v1544798173/1544797413_5gbSBNViC81pMgpVitW7.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
<div class="annotation-list layout-small" id="surveychart-annotations">
<div class="flexwrap">
<div class="annotation-list__item">
<div class="annotation-list__number">1</div>
<div class="annotation-list__text">
<h3>Brexit referendum June 23 2016</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://cdn.pixabay.com/photo/2018/07/31/16/06/brexit-3575384_1280.jpg"/></div>
<p>Following the vote for Brexit on June 23 the pound plunged <strong>from $1.43</strong> the week before the Brexit vote <strong>to $1.36</strong> as the market panicked following the result. <strong>David Cameron</strong> the Prime Minister resigned and Theresa May emerged as an unlikely leader to see Brexit through.</p>
Do you see an issue with this line of HTML code?
<button id="buttons" onclick="playAudio()" id="start">Start</button>
Multiple IDs? Change it to either a class or a data-attribute or anything else other than a second ID and it'll work.
A fork: https://codepen.io/anon/pen/yGameg