Here is my code:
Html:
<div id="audio-files" style="display: none;">
<audio id="click-sound">
<source src="/assets/click.mp3" type="audio/mpeg">
<source src="/assets/click.wav" type="audio/wav">
</audio>
</div>
JavaScript:
play: function() {
var audio = $('#audio-files').find('audio#click-sound');
if (audio.length) {
audio[0].play();
}
}
Desired behaviour:
When I call play(), the sound should play once. There should be only 1 request to the server - on page load. Multiple calls to play() should not trigger multiple requests.
Actual behaviour:
- Firefox (19.0.2), Chrome(26.0.1410.43) and Opera(12.15) work as expected.
- Safari (6.0.3) plays the desired sound only once, then refuses to play it or any other sound when asked to.
I tried adding audio[0].load() before audio[0].play() but this causes the browser to make a request each time it is asked to play the audio, which is totally undesirable.
Fiddle: http://jsfiddle.net/Tpvfm/
I think there is a problem with your example mp3 file.
I just removed it (mp3) from your fiddle and it works in my Safari on OSX.
<div id="audio-files" style="display: none;">
<audio id="click-sound">
<source src="/assets/click.wav" type="audio/wav">
</audio>
</div>
Fiddle: 73GCX
Related
I am building a php page that generates html5 audio elements from an rss feed.
<? foreach($tracks as $track){ ?>
<audio controls >
<source src="<?= $track['track_url'] ?>" type="audio/mpeg">
<source src="<?= $track['track_url'] ?>" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<? } ?>
There are about 300 tracks in this case so I do not load them all at once (the above code is to illustrate the concept).
I load a few tracks initially, then load additional tracks as the user scrolls down.
You can check out the page here: http://canneconomy.com/podcast
The first few tracks load and play without issues. However, after 10 or so tracks are loaded, the user is no longer able to play the HTML5 audio elements. I believe this is because all of the sockets are occupied and no more can be used.
My proposed solution is to prevent the HTML5 audio elements from automatically reserving sockets as they are generated and manage this process manually. A socket would only be used when a user clicks the play button. Hitting another play button would free all sockets and occupy only one.
How would one go about managing socket connections manually? This is a PHP/jQuery app.
You can achieve your desired behaviour by adding preload="none" to each audio item which will prevent the initial download of the file until a user clicks on the play button.
Also from looking at your source your attempting to stop the player above when the user plays the next item onplay="stop('trk2',300)", but that's a little optimistic that the user will traverse down the list instead of skipping a couple etc.
You can fix this issue by listening for a play event and then iterating over all players, then pausing them if it's not the target player.
A couple of very simple changes, for example:
<audio controls preload="none" id="trk1" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio controls preload="none" id="trk2" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio controls preload="none" id="trk3" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
document.addEventListener('play', function(e){
var audio_elms = document.getElementsByTagName('audio');
for (var i = 0, length = audio_elms.length; i < length; i++) {
if (audio_elms[i] != e.target) {
audio_elms[i].pause();
}
}
}, true);
</script>
^^^ run the snippet to see it in action.
I want to display a video on a page which starts at a certain position (e.g., 10 seconds). I have found a way to program this with the code below.
My problem is that it takes the browser several seconds to start the video. As far as I have read, the browser needs to load the duration of the video before it can play it at the certain position.
Is there some way to start the video immediately without any delay?
This is my code:
HTML
<video style="display:block; margin: 0 auto;" width="512" height="288" id="vid1" autoplay>
<source src="video.ogg" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>
Javascript
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 10 ;}, false)
I would be very thankful for every hint!
Thanks in advance!
I won't have enough have the reputation to comment so posting as an answer.
Have you tried to put ??
document.getElementById("vid1").load();
This load() method is used to load/update the video.
I have a simple angular application that has an audio player integrated.
<audio id="passage-audio" class="passage" controls ontimeupdate="document.getElementById('tracktime').value = this.currentTime ;">
<source src="Luke.2.1-Luke.2.20.mp3" type="audio/mp3">
<em class="error"><strong>Error:</strong> Your browser doesn't appear to support HTML5 Audio.</em>
</audio>
the audio player has an event called "ontimeupdate", this will update the time in the html element with the id "tracktime". This works fine.
What i would like to do is to use "ontimeupdate" to invoke a function in the controller. Right now it is not has access to the class.
<audio id="passage-audio" class="passage" controls (ontimeupdate)="updateTime()">...
</audio>
I there a way to accomplish this?
If i write an audio directive will i be able to access this event?
Thanks
Try <audio ... (timeupdate)="updateTime()">
Not sure what you want, but if it is to update you angular app at each timeupdate, you can accomplish this by calling $scope.$apply() and passing a $scope function.
this is working fine for me
function onChangeAudio(event) {
var durration = event.srcElement.duration;
alert("call")
}
<audio controls class="w-100" id="audio" (timeupdate)="onChangeAudio($event)">
<source src="..." type="audio/ogg">
<source src="..... " type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.
I have a problem with getting sound to play and pause within my JS and HTML code.
I have a function that takes the two tracks inputted, pauses one, and plays another, for use to create dynamic music based on where the user is or what it is doing. However when the function is called, neither track is played or paused. I've looked up online to make sure that I'm using the proper audio formatting and from my research I have been. I'm currently stumped as to why this isn't working so a fresh set of eyes may help to figure out the problem.
My Javascript:
function playTrack(musicon, musicoff) {
document.getElementById(musicon).play();
document.getElementById(musicoff).pause();
}
My HTML
<audio id="themeD" autoplay="autoplay" loop="true">
<source src="d.ogg" type="audio/ogg" />
<source src="d.mp3" type="audio/mpeg" />
</audio>
<audio id="themeE" loop="true">
<source src="e.ogg" type="audio/ogg" />
<source src="e.mp3" type="audio/mpeg" />
</audio>
<a class="button" onclick="javascript:playTrack('ThemeE','ThemeD');">Change audio</a>
Somewhat of a beginner with Javascript and definitely a noob with audio elements so any and all help or tips would be appreciated.
Watch your spaces. You play the audio with the id Theme E, but the id of your audio is themeE