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
Related
I'm doing a simple project for a digital arts class. I want to do a simple little choose your own adventure game, where you watch a clip, then choose from up to several different options on what to do next. Your decision will trigger a video, and the adventure will go on for a little awhile and the player will either escape the haunted house or be killed. This is my first time working with HTML5.
I need to do the following things:
1) When a button is pressed, a certain video is played.
2) After that video ends, the block of text at the top of the screen changes accordingly, presenting players with additional information and explaining their options in greater detail than the clips themselves can provide.
Right now, I just need help with step 1. I can't seem to figure out how to get the button onclick command to work correctly. The program displays the first Intro video just fine, but does not react at all when you click on any of the buttons. I was initially hoping to use something along the lines of an if else button.pressed command, but I can't find anything like that in HTML5. I know its not possible to troubleshoot my code since no one has access to my local files, but I'd appreciate any advice. Thanks!
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spooks: Choose Your Own Adventure</title>
<script>
function $(id)
{
return document.getElementById(id);
}
//Video Source Changers
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4" type="video/mp4">
}
function Wander()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
function Match()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
</script>
</head>
<body style= "background-color: black">
<p style= "color:white">What an awful time to get stranded out in the countryside! It's raining cats and dogs out here. Hungry, freezing, exhausted and desperate, you head to the nearest visible shelter - a decrepit old mansion. Surely southern hospitality will see you safely through the night.</p>
<p>
<video width="400" controls>
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
</p>
<p>
<button onclick="Door()">This is creepy. I'll just go back through the front door.</button>
<button onclick="Wander()">Really weird, but I guess it beats the storm. The owner probably just ran off to get the lights working. I'll wander around a bit, see if I can find him.</button>
<button onclick="Match()">It'd be nice to be able to see before I make a decision one way or the other. Let's light a match...</button>
</p>
</body>
</html>
Looks like there are a couple of issues.
1) your $('movie').src is invalid javascript, you have some junk code (type="video/mp4">) at the end of the line and the line should end with a semicolon. e.g.
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4";
}
2) Your video tag doesn't have an id attribute so you are not actually referencing anything in your javascript call to update the src:
<video width="400" controls id="movie">
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
I put an updated JSfiddle here: http://jsfiddle.net/tv7pahcf/
I am trying to embed audio files on a website for a client (who composes music as her job).
Since she is very specific about quality, she gave me a 20 minute mp3 track # 320 Kbps (approx 50Mb). This track would ideally autoplay on the home page of the website when we arrive on the website, but have controls to pause it if needed.
There will be other players elsewhere (not on autoplay, though), so I need to find a way to do all this with the same look, in a way that I understand and that's simple to install (I'm not so good with JS). Also, I need it to work on all devices, no flash.
I first tried embedding with HTML5 (simple to use, no-flash), but the HTML5 player wouldn't start playing right away (or "stream"), it would wait for the 50Mb file to be fully loaded before playing, which took too long.
I also just tried to install the player "BAR-UI / Compact UI single Item" from SoundManager2, it looked really good in its design, and would be ideal, but I cannot make it work or find a complete enough tutorial for installing a player with controls, even after trying for two hours - either the file doesn't play but the player shows up (although without song names displaying), or the song plays immediately in the browser, but the controls don't show. It's hard to troubleshoot SoundManager2 considering there are 4000 lines just in the CSS in their code, and I've found very few explanations to install SoundManager's Bar-UI and its very confusing files.
WikiAudio has a great page about SoundManager, but it doesn't go into installing and displaying controls.
Other options I've looked at (jPlayer) were either extremely complex for what I'm trying to do (it's just a simple mp3 file playing as it loads on a website!), or were flash-based...
To make the BAR-UI work in your webpage you must insert the HTML fragment. It can be customized with different class names (for example full-width for full width plauer):
<div class="sm2-bar-ui compact">
<div class="bd sm2-main-controls">
<div class="sm2-inline-texture"></div>
<div class="sm2-inline-gradient"></div>
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
Play / pause
</div>
</div>
<div class="sm2-inline-element sm2-inline-status">
<div class="sm2-playlist">
<div class="sm2-playlist-target">
</div>
</div>
<div class="sm2-progress">
<div class="sm2-row">
<div class="sm2-inline-time">0:00</div>
<div class="sm2-progress-bd">
<div class="sm2-progress-track">
<div class="sm2-progress-bar"></div>
<div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
</div>
</div>
<div class="sm2-inline-duration">0:00</div>
</div>
</div>
</div>
<div class="sm2-inline-element sm2-button-element sm2-volume">
<div class="sm2-button-bd">
<span class="sm2-inline-button sm2-volume-control volume-shade"></span>
volume
</div>
</div>
</div>
<div class="bd sm2-playlist-drawer sm2-element">
<div class="sm2-inline-texture">
<div class="sm2-box-shadow"></div>
</div>
<div class="sm2-playlist-wrapper">
<ul class="sm2-playlist-bd">
<li><b>SonReal</b> - I Tried</li>
</ul>
</div>
</div>
</div>
Then you have to load the resources for the player:
The JavaScript file that detects the previous HTML fragment and convert it to a player: bar-ui.js
The CSS file to style the player: bar-ui.css
All these files are in the "demo" folder of the downloadable SoundManager 2: download
would Amazing Audio Player meet your needs? http://amazingaudioplayer.com/ they supply the js with some straightforward customization, and you can finetune the css for your needs.
I've used it successfully with 320kbs files, 12 minutes long.
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>
I'm wondering if there's a quick and simple way to style the HTML5 audio element to display what I want. I was wondering if you could turn certain controls on and off, but that doesn't seem to be the case.
I do not want a progress/track bar, or to display the time left. I just want a simple play/pause toggle button, and a mute/unmute toggle button.
That's all! Any ideas?
Use this code it will serve your purpose.
<!DOCTYPE html>
<html>
<body>
<audio id="player" src="horse.ogg"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button>
</div>
</body>
</html>
You could use the Media API and build your own set of controls with the functionality you want. I've written about this: Working with HTML5 multimedia components – Part 3: Custom controls - which shows a video example, but you can just as easily build an audio one.
I have an image of a video which is linked, and it is surrounded by Div tag that launches my content locker. I want to track how many times people open the content locker using Google Content Experiments (I have a separate goal setup for actual completion of the locker).
The div class "link_loc" launches my locker successfully, but I'm not sure about the onClick event working correctly with Google Content Experiments.
So this is the code I have... is this correct?
<div class="link_loc"
onclick="_gaq.push(['_trackEvent', 'ExperimentConversions', 'Click', 'Video']); return false;">
<a href="http://example.com/">
<img class="size-full wp-image-8 aligncenter" title="Play Video"
src="http://example.com/video_player_image.jpg" alt="Play Video"
width="640" height="366">
</a>
</div>
I have searched for a solution but am still very confused (I'm not very technical minded).
Any help appreciated.
Thanks,
Ben