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.
Related
i need help in php website.i am create website like online videos courses.i need help in video module.if playing any video and close it after some time and again play this video then need to play it where it can be stop or closed.
This video are getting from database not embedded video.for showing video i am using afterglow video player.
<video class="afterglow" id="myvideo" height="385px" width="770px">
<source type="video/mp4" src="adminpanel/video/<?php echo $results->c_video; ?>" />
</video>
Is there any script to solve this problem.
As suggested in the comments you have to save the position of your video somewhere. The most simple approach would be to use the localStorage. You can read more about localStorage in the official documentation: https://developer.mozilla.org/de/docs/Web/API/Storage
While the video is played the timestamp gets refreshed each second and the localStorage item is updated.
Then if you reload the page (remember: item still exists in the storage after a refresh) you check for its existence and set the video to the timestamp.
This should point you in the right direction.
let video = document.getElementById("example");
if (localStorage.hasOwnProperty("time")) { //if time was set before adjust the video to it
video.currentTime = localStorage.getItem("time");
}
let timer = setInterval(getTimestamp,1000);
function getTimestamp(){
localStorage.setItem("time", video.currentTime);
console.log(localStorage.getItem("time"));
}
<video id="example" width="320" height="240" controls>
<source src="yoursourcefile" type="video/mp4">
</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>
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
Hi im using mediaelement player wich is great actually, the problem is even if i convert the file to all the formats, in ipad is strange some times i just hear audio, some times nothing plays , and just once, just one time the video play with the play image logo all the time over it.. what is wrong with my mediaelement code
<div class="videoquon">
<div class='my-video-close' onclick='player.pause();'></div>
<div id="marfvideo"><video width="530" height="377" id="player" controls="controls">
<source src="media/mp4/ingles.mp4" type="video/mp4" title="mp4">
<source src="media/webm/ingles.webm" type="video/webm" title="webm">
<source src="media/ogv/ingles.ogv" type="video/ogg" title="ogg">
<source src="media/flv/ingles.flv" type="video/flv" title="flv">
<p>Tu navegador necesita ser actualizado.</p>
</video></div>
<script>
$('audio,video').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 530,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 377,
autosizeProgress: true,
// Hide controls when playing and mouse is not over the video
features: ['playpause','progress','current','duration','tracks','volume','sourcechooser','fullscreen'],
alwaysShowControls: false
});
</script>
<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player');
// ... more code ...
</script>
</div>
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