I am a super noob making my first html mobile app for my exhibition. I want to make a simple audio tour and found this
jsFiddle that suits my needs perfectly
http://jsfiddle.net/jackdent/3UXDH/3
But I don't know how to make a stop button to work with it.
Could you please help?
You can use pause() to stop it and remove src.
Demo
<div class="wrapper">
<a onclick="trombone.play()" class="button"><audio id="trombone" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"></audio>►</a> Trombone
<a onclick="trombone.pause()" class="button">Stop</a>
</div>
Another thing is, you don't need to use this.firstChild, instead you can just refer to the element by id(provide the Audio element an id or className so that you can refer to it easily)
Reference Here
Look at this example provided in the reference document
<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>
Related
I have been using this interchangeably and the working is same. Is there really any difference?
which method should be use in which cases?
<html>
<head>
</head>
<body>
<button> click </button>
<button> click </button>
</body>
</html>
Both are forbidden in HTML. So use neither.
If you want to link somewhere. Use .
If you want to submit a form. Use <button></button>
If you want a control to trigger JavaScript (and can't figure out how to do it with progressive enhancement), use <button type="button"></button>
Then apply CSS to make it look the way you want.
I'm trying to build a responsive audio stream player with html 5. I already achieved a fallback-solution to flash to keep things x-browser-compatible, but I got into trouble when it came to styling the player.
A standard example for the html 5 audio player would be:
<audio id="audio" preload="auto" controls style="width:100%;">
I like how the standard controls of the html 5 audio player look when coded this way, but since my player will be used for live broadcasting only, I don't want to have the standard progress bar, just play/pause, volume and mute.
Is it possibile to somehow deactivate the progress-bar-function of the audio-tag? The only solution I found so far is to code every single button in html and style it with css. This would cost much more time.
I'm thankful for every hint, best regards,
Sebastian
Use Following code: Hope will work fine for you
<html>
<body>
<audio id="player" src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"></audio>
<div>
<button onclick="document.getElementById('player').play()">
<img src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/48/Play-Normal-icon.png"/>
</button>
<button onclick="document.getElementById('player').pause()">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/48/Pause-icon.png"/>
</button>
<button onclick="document.getElementById('player').volume+=0.1">
<img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_sound_audio_speaker_music_off_high.png"/>
</button>
<button onclick="document.getElementById('player').volume-=0.1">
<img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_down_arrow_download_up.png"/>
</button>
</div>
</body>
</html>
add style on <div> if you want to add background etc.
Hop it will work for your purpose
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
I want to create an HTML help button (that looks like an image).
What is the best semantic way to do it ?
Here's what I was thinking about:
1st solution:
HTML
<button class='help'>
<img/>
</button>
2nd solution:
HTML
<button class='help'>
</button>
CSS
button.help
{
background-image:...;
}
3rd solution
HTML
<img class='button' src='blabla'/>
I think the button tag is indispensable as it will behave like a button (you can click on it to get some help, basically)
If you are using the button for some form submission, than I would prefer using
<input type="image" src="PATH_TO_IMAGE" alt="Submit Button" />
If you want to stick to the button tag, I would prefer using the background-image way.
Why?
Well, you can use CSS Sprites for your website and place the image on the canvas, than map the images using background-position property, this way it will reduce http request by one, in fact not just one, it will save you more if you wish to have more buttons with different images later...
I would say:
<button class='help'>
</button>
Could also add:
<button class="help" role="button">Help</button>
I have a <button> with a hyperlink tag inside, looks like this:
<button class="btn"></button>
This works well in Chrome and Safari, BUT doesn't work in Firefox (ver 20 tested).
What's wrong?
To make it work in all browser, Firefox too you have to change it to
<button class="btn"></button>
or as suggested by Billy Moat in case of bootstrap there was no need of <button> you could just do
GO
Probably better to just do this:
Go!
This issue is happening in FF and IE(< 10).
The browser simply doesn't like the tag button when it's used as a link.
Quick solution in bootstrap is to use and give a class of btn btn-default (or your choice of button style).
However, you can use in a form (submit button for instance) and you shouldn't have an issue.
You can simply use an onclick method instead of changing the HTML structure, if you can't change your structure because of something that doesn't allow you to change(e.g. bootstrap components as list-groups, that's my case hehe) and mainly if you want to put two or more links inside a button:
<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
In case you are using wordpress wp_loginout function. This function create a link for login/logout to nest the link inside a button for styling eg: using btn btn-primary just replace the <button> tag it with a <span> tag
<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>
Nesting an <a> tag inside a <button>, or vice versa, violates HTML rules and will not pass a code validator:
"The element <a> must not appear as a descendant of the <button> element."
If you want your button to behave like a link, or your link to look like a button, you can style your link to look like a button with CSS or Bootstrap, as shown by Billy Moat's answer,
OR
you can use location.href in the button tag:
<button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button>
<button onclick="window.location.href='/css_page.html'">CSS page</button>
This worked for me to retain bookstrap btn-group stylings:
<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>