Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added support for onAfterPlay event. Fixed issue: 'not found [email protected] #212' #235

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added support for onAfterPlay event. Fixed issue: 'not found [email protected] #212' #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Manifest
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
audiojs/audio.min.js
audiojs/audiojs.swf
audiojs/player-graphics.gif
audiojs/[email protected]
includes/index.css
index.html
13 changes: 10 additions & 3 deletions audiojs/audio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,10 @@
var player = this.settings.createPlayer;
container[audiojs].helpers.removeClass(this.wrapper, player.errorClass);
container[audiojs].helpers.addClass(this.wrapper, player.playingClass);
this.settings.onAfterPlay();
},
onAfterPlay: function() {
// to be overridden
},
pause: function() {
var player = this.settings.createPlayer;
Expand Down Expand Up @@ -229,10 +233,10 @@
instances = []
options = options || {};
for (var i = 0, ii = audioElements.length; i < ii; i++) {

if ((" " + audioElements[i].parentNode.className + " ").replace(/[\n\t]/g, " ").indexOf(" audiojs ") > -1)
continue;

instances.push(this.newInstance(audioElements[i], options));
}
return instances;
Expand Down Expand Up @@ -628,12 +632,15 @@
this.element.currentTime = this.duration * percent;
this.updatePlayhead();
},
load: function(mp3) {
load: function(mp3, trackid) {
// trackid not required, default: ""
trackid = typeof trackid !== 'undefined' ? trackid : "";
this.loadStartedCalled = false;
this.source.setAttribute('src', mp3);
// The now outdated `load()` method is required for Safari 4
this.element.load();
this.mp3 = mp3;
this.trackid = trackid;
container[audiojs].events.trackLoadProgress(this);
},
loadError: function() {
Expand Down
25 changes: 1 addition & 24 deletions audiojs/audio.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added audiojs/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
215 changes: 215 additions & 0 deletions demos/test7.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<meta content="width=device-width, initial-scale=0.6" name="viewport">
<style>
body { color: #666; font-family: sans-serif; line-height: 1.4; }
h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }
h1 em { font-style: normal; color: #999; }
a { color: #888; text-decoration: none; }
#wrapper { width: 400px; margin: 40px auto; }

ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
li.playing a { color: #000; }
li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }

#shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
#shortcuts div { width: 460px; margin: 0px auto; }
#shortcuts h1 { margin: 0px 0px 6px; }
#shortcuts p { margin: 0px 0px 18px; }
#shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

@media screen and (max-device-width: 480px) {
#wrapper { position: relative; left: -3%; }
#shortcuts { display: none; }
}

.credit {
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="../audiojs/audio.min.js"></script>
<script>
function hideTrackinfo(){
$('[id^=trackinfo_]').hide(0);
}

$(function() {
// Hide all trackinfo
hideTrackinfo();
$("#trackinfo_init").show(0);

// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'), $('a', next).attr('data-trackid'));
audio.play();
},
onAfterPlay: function(){
var trackid = a[0].trackid;
hideTrackinfo();
$("#trackinfo_"+trackid).show(1);
}
});

// Load in the first track
var audio = a[0];
firsttrack = $('ol a');
$('ol li').first().addClass('playing');
audio.load(firsttrack.attr('data-src'), firsttrack.attr('data-trackid'));

// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
var track = $('a', this);
audio.load(track.attr('data-src'), track.attr('data-trackid'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
</script>
</head>
<body>
<div id="wrapper">

<a target=_blank href="http://www.bloodturn.dk#tracks"><u>Bloodturn.dk - Live demo of trackinfo used for Lyrics</u></a>
<br>
<h1>Bensound Royalty Free Tracks</h1>
<audio preload></audio>
<ol>
<li><a href="#" data-trackid="dubstep" data-src="../mp3/bensound-dubstep.mp3">Dubstep</a></li>
<li><a href="#" data-trackid="cute" data-src="../mp3/bensound-cute.mp3">Cute</a></li>
<li><a href="#" data-trackid="buddy" data-src="../mp3/bensound-buddy.mp3">Buddy</a></li>
<li><a href="#" data-trackid="acousticbreeze" data-src="../mp3/bensound-acousticbreeze.mp3">Acoustic Breeze</a></li>
<li><a href="#" data-trackid="epic" data-src="../mp3/bensound-epic.mp3">Epic</a></li>
<li><a href="#" data-trackid="funnysong" data-src="../mp3/bensound-funnysong.mp3">Funny Song</a></li>
<li><a href="#" data-trackid="littleidea" data-src="../mp3/bensound-littleidea.mp3">Little Idea</a></li>
<li><a href="#" data-trackid="betterdays" data-src="../mp3/bensound-betterdays.mp3">Better Days</a></li>
</ol>
<br>

<div>
<h1>Trackinfo</h1>
<div id="trackinfo_init">
Select a song from the playlist.
</div>
<div id="trackinfo_dubstep">
<h3>Dubstep</h3>
Lorem ipsum dolor sit amet,<br>
consectetur adipiscing elit.<br>
Nam auctor nunc ut <br>
scelerisque commodo.<br>
Cras eget tellus <br>
id augue elementum accumsan. <br>
Pellentesque dapibus aliquet <br>
nibh sit amet elementum. <br>
</div>
<div id="trackinfo_cute">
<h3>Cute</h3>
Donec consectetur malesuada tortor.<br>
Proin elementum eleifend ligula.<br>
Integer rhoncus vehicula arcu,<br>
scelerisque hendrerit libero facilisis eu.<br>
Nam vel dolor sit amet enim viverra<br>
rhoncus nec et nulla.<br>
</div>
<div id="trackinfo_buddy">
<h3>Buddy</h3>
Cras laoreet pretium<br>
lorem eget euismod.<br>
Vivamus sed congue risus,<br>
sit amet vehicula neque.<br>
Aliquam vel tempus leo.<br>
Pellentesque sit amet pretium leo<br>
</div>
<div id="trackinfo_acousticbreeze">
<h3>Acoustic Breeze</h3>
vulputate faucibus eros.<br>
Proin elementum lorem libero,<br>
quis maximus augue consectetur sed.<br>
Nullam facilisis lectus vitae<br>
sem ullamcorper euismod.<br>
Aliquam interdum velit ligula.<br>
Sed dictum libero tortor,<br>
in pharetra leo euismod nec.<br>
Duis in ex augue.
</div>
<div id="trackinfo_epic">
<h3>Epic</h3>
Aenean varius convallis facilisis.<br>
Orci varius natoque penatibus<br>
et magnis dis parturient montes,<br>
nascetur ridiculus mus.<br>
Sed tempus dolor sagittis,<br>
iaculis quam id, posuere ipsum.<br>
Maecenas sed condimentum urna.<br>
In hac habitasse platea dictumst.<br>
</div>
<div id="trackinfo_funnysong">
<h3>Funny song</h3>
Sed ante purus, tempus ac euismod vitae,<br>
volutpat in risus.<br>
Maecenas volutpat ligula diam,<br>
ut imperdiet elit posuere in.<br>
Aliquam erat volutpat.<br>
Quisque aliquam malesuada<br>
nulla vel lobortis.<br>
</div>
<div id="trackinfo_littleidea">
<h3>Little Idea</h3>
In malesuada arcu quam,<br>
ac sollicitudin erat congue semper.<br>
Phasellus vestibulum,<br>
erat ac suscipit fringilla,<br>
dui purus molestie lectus,<br>
et fringilla velit tellus quis<br>
ligula. In hac habitasse platea dictumst.<br>
</div>
<div id="trackinfo_betterdays">
<h3>Better Days</h3>
vulputate faucibus eros.<br>
Proin elementum lorem libero,<br>
quis maximus augue consectetur sed.<br>
Nullam facilisis lectus vitae<br>
sem ullamcorper euismod.<br>
Aliquam interdum velit ligula.<br>
Sed dictum libero tortor,<br>
in pharetra leo euismod nec.<br>
Duis in ex augue.
</div>
</div>
</div>

<p class="credit"><a href="http://www.bensound.com/royalty-free-music/">Royalty Free Music from Bensound</a></p>
</body>
</html>
5 changes: 3 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Expand Down Expand Up @@ -48,7 +48,8 @@ <h3>Examples</h3>
<p><em>Example 3</em> <a href="http://kolber.github.com/audiojs/demos/test3.html">Multiple players, testing <code>preload</code>, <code>loop</code> & <code>autoplay</code> attributes</a></p>
<p><em>Example 4</em> <a href="http://kolber.github.com/audiojs/demos/test5.html">Customised player</a></p>
<p><em>Example 5</em> <a href="http://kolber.github.com/audiojs/demos/test6.html">Customised playlist player</a></p>
<p><em>Example 5</em> <a href="http://kolber.github.com/audiojs/demos/test6.html">Volume Control</a></p>
<p><em>Example 6</em> <a href="http://kolber.github.com/audiojs/demos/test6.html">Volume Control</a></p>
<p><em>Example 7</em> <a href="http://kolber.github.com/audiojs/demos/test7.html">Customised playlist player + custom trackinfo </a></p>

<h3>Source code</h3>
<p>All efforts have been made to keep the source as clean and readable as possible. Until we release more detailed documentation, the annotated source is the best reference for usage.</p>
Expand Down