I am playing the following mp3 in various browsers and sometimes it plays and sometimes it doesn't. Specifically now it doesn't play in Chrome anymore but it plays in Firefox:
http://langcomplab.net/Most_Precious_Possession_Master.mp3
Here's the code for it:
The second auditory story is titled, “The Most Precious Possession.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story.
<div>
<audio id="audio3" src="http://langcomplab.net/Most_Precious_Possession_Master.mp3" style="width:50%">Canvas not supported</audio>
</div>
<p> </p>
<div><button name="play" onclick="disabled=true" style="height:25px; width:200px" type="button">Play Story</button></div>
Here's the javascript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
var aud = document.getElementById('audio3');
this.questionclick = function(event,element){
if((element.type == "button") && (element.name == "play"))
{
aud.play();
}
}
});
So I am not sure what's the fix. I am using Qualtrics for creating an audio survey.
UPDATE:
Eventhough I changed the code to the following it doesn't say the browser doesn't support this format. I am not sure what I am missing. Here's a screenshot:
<audio controls="">< id="audio3" src="http://langcomplab.net/Honey_Gatherers_Master.mp3" style="width:50%" type="audio/mpeg">Your browser does not support this audio format.</audio>
You could just use this:
<div>
<audio controls>
<source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
Your browser does not support this audio format.
</audio>
</div>
It should work on any modern browser (HTML5 is needed). Hope that helps.
Edit: To make it work with the button, and not show the HTML5 controls, you could use:
The second auditory story is titled...
<div>
<audio controls id="reader" style="display:none">
<source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
Your browser does not support this audio format.
</audio>
</div>
<input id="Play Story" type="button" value="Play Story" onclick="document.getElementById('reader').play();" />
Related
This is my header:
I want to add sound affect twice:
on mouseover on a href from (innerlinks)
on click on href from (innerlinks)
I want a different sound onclick and onmouseover.
what is the best way?
thanks!
<div id="HoverHeader">
<div id="SiteHeader">
<div id="MainNav">
<div id="btnNav"><img src="../../../000Frames/site/images/menu-bt.png" alt="menu"/></div>
<uc1:mainNav ID="mainNav1" runat="server" />
<div id="InnerLinks">
תיק עבודות
לקוחותינו
אודותנו
צור קשר
</div>
</div>
</div>
</div>
You can add couple audio tags on page and play them as described in this article - Play Sound on :hover | CSS-Tricks.
<audio>
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
<script>
var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});
</script>
That needs JavaScript and an audio tag. This is from http://css-tricks.com/play-sound-on-hover/
For hover sound:
<audio id="hover">
<source src="audio/hover.mp3"></source>
<source src="audio/hover.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var hover = $("#hover")[0];
$(".InnerLinks a").mouseenter(function() {
hover.play();
});
For click sound:
<audio id="click">
<source src="audio/click.mp3"></source>
<source src="audio/click.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var click = $("#click")[0];
$(".InnerLinks a").click(function() {
click.play();
});
Demos at CSS Tricks
So here's the shape I receive (there is supposed to be only a play button not another triangular play shape above it). Any idea why this happens when I browse it in ipad air?
And this is what I should receive (say in desktop):
Here's the code I've used:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
var aud = document.getElementById('audio2');
this.questionclick = function(event,element){
if((element.type == "button") && (element.name == "play"))
{
aud.play();
// remove the element
element.parentNode.removeChild(element);
// or set it to disabled, what you like
element.disabled = true;
}
}
});
and HTML is:
Now that you know how the auditory stories will sound, you are ready to listen to and comprehend the two auditory stories in this study. The first auditory story is titled, “The Honey Gatherer’s Three Sons.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story.
<div>
<p> </p>
<audio controls="controls" id="audio2" preload="preload" style="display:none"><source src="http://langcomplab.net/Honey_Gatherers_Master.webm" style="width:50%" type="audio/webm" /> <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" style="width:50%" type="audio/mpeg" /><source src="http://langcomplab.net/Honey_Gatherers_Master.ogg" style="width:50%" type="audio/ogg" /> Your browser doesn't support this audio format.</audio>
</div>
<p> </p>
<div><button name="play" style="height:25px; width:200px" type="button">Play Story</button></div>
I found this :
If you want to provide your own media controller on the desktop or iPad, just leave out the controls attribute.
Source : Link
However I don't find it a good method to leave out controls as I need it that feature in the first place for fall back message purpose.
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});
I'm doing a video interface web with HTML5 and JavaScript.
I'm having problems with JavaScript because I need to control the video with keys so when someone press a key from the keyboard, for example 'P', the video will be on 'Play' or 'Pause'.
The problem is that it's not working on Chrome and Opera but does on Firefox.
The excerpts below are parts of the total code:
The HTML:
<video width="775" id="player" preload controls timeupdate="timeupdate()" onclick="repro()" onMouseOver="mostrarControles()" onMouseOut="ocultarControles()">
<source src="video.mp4" type="video/mp4" />
<source src="video.theora.ogv" type="video/ogg" />
<source src="video.webmvp8.webm" type="video/webm" />
TU NAVEGADOR NO SOPORTA VIDEO EN HTML5.
</video>
<div id="controls" onMouseOut="ocultarControles()" onMouseOver="mostrarControles()" >
<!-- Buttons of control-->
</div>
Java.JS - Function where I have problems on Chrome and Opera:
document.getElementById("controls").addEventListener('keydown',function(event) {
controlTeclado(event);
//alert("OK");
}, true);
I have detected that Chrome and Opera don't access inside the .addEventListener() and I don't know why, any idea?
ProgressBar.JS:
function controlTeclado(evento) {
mostrarControles(); // show controls on the web page
if (evento.keyCode==80) {
alert(" Key: "+evento.keyCode);
repro(); //play video
}
}
<div> elements do not receive key events by default. Only focusable elements such as form inputs and contenteditable elements do. To make a regular <div> able to fire key events, assign it a tabIndex (a value of zero means that the element is in the regular tab order):
<div id="controls" tabindex="0"
onMouseOut="ocultarControles()" onMouseOver="mostrarControles()">
...
</div>
I was actually able to make music play continuously throughout the pages without reloading, using frames (I know music playing continuously is not a good idea but the client really requested it, so I had no choice). Here is what I used for the frame with the music playing:
<body>
<div id="player">
<audio id="audio" controls="controls" autoplay="autoplay" loop="loop" style="width:150px;">
<source src="martnalia05namoracomigo.ogg" type="audio/ogg" />
<source src="martnalia05namoracomigo.mp3" type="audio/mp3" />
<embed src="martnalia05namoracomigo.mp3" hidden="true" loop="TRUE" autostart="TRUE"></embed>
</audio>
</div>
</body>
I inserted this music just to test, and I would like to know if it is possible to make a play list and if it is possible to inform the music which is currently playing with a link in it and a button to skip a music, for example:
[player]
| button previous | button to play/pause | button next
| name of the music (link to the page of the Album) |
[end of player]
Any suggestions?
You are wanting to make a small media player perhaps, if thats the case there are plenty of ready made script available to help you accomplish this. (Google is your friend).
If you do decide to go about it on your own here are my thoughts, they may help you in the right direction.
var data = [{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"},
{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}];
Some sort of data structure to store the details of your tracks.
var audio = document.getElementById("audio");
audio.addEventListener('ended', playNext);
Finally some sort of function to handle the switching of tracks
var currentTrack = 0;
function playNext(options){
currentTrack++;
if (currentTrack > data.length){
currentTrack = 0;
}
var audiosrc = document.getElementById('embed_element_id') // or some other selector method
audiosrc.src = data[currentTrack].audiourl;
audiosrc.play();
}
Im not totally sure on the HTML5 audio specification but i would assume its along these lines.
Hope this helps
You're probably going to have to use a media player plugin. Try LeanBack Player:
http://leanbackplayer.com/ + http://leanbackplayer.com/player_extensions.html (XSPF Audio Playlist extension)
It's HTML5/CSS/JS with a Flash fallback option so you should be able to style it to suit your needs easily enough.