Skip to content

Instantly share code, notes, and snippets.

@justinoboyle
Forked from Luc-Gibson/character-index.html
Last active December 20, 2016 22:27
Can anyone help me get the rewind and fast forward buttons on this simple jaa audio player to work? It would be great if they could skip 15 seconds backward & forward.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.container {
padding: 20px;
padding-bottom: 15;
max-width: 200px;
background-image: url(http://pixelcolony.co.uk/host/audio-widget/bg.png);
background-position:center;
background-size: contain;
height: auto;
margin: 0 auto;
margin-top: 0px;
border-radius: 6px 30px 6px 30px;
}
.downloadcontainer {
padding: 20px;
max-width: 200px;
background-color: darkgrey;
background-position:center;
background-size: contain;
height: auto;
margin: 0 auto;
border-radius: 0px 0px 6px 6px;
}
.tg {border-collapse:collapse;border-spacing:0; width: 100%;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding-top:10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding-top:10px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
.icon {margin: 0 auto; display:block; max-width: 60px;}
.rewind{
margin-top:5px;
max-width:40px;
}
.playpause{
max-width: 50px;
}
.download{
max-width: 17px;
float: right;
margin-bottom: 30px;
}
h3{
text-align: center;
font-family: 'Roboto', sans-serif;
color: #5c5c5c;
}
h4{
text-align: left;
font-family: 'Roboto', sans-serif;
color: #5c5c5c;
padding: 0;
margin: 0;
}
hr{border-color: #a8a8a8; border-width: 1px; border-style:solid;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://pixelcolony.co.uk/host/audio-widget/audio/character-reel.wav');
var isread = 0;
audioElement.addEventListener("timeupdate",function(){
$("#currentTime").text("Current second:" + audioElement.currentTime);
});
$('#play').click(function() {
if (isread == 0){
var edit_save = document.getElementById("play");
edit_save.src = "http://pixelcolony.co.uk/host/audio-widget/controls/pause.png";
audioElement.play();
$("#status").text("Status: Playing");
isread = 1;
}
else{
var edit_save = document.getElementById("play");
edit_save.src = "http://pixelcolony.co.uk/host/audio-widget/controls/play.png";
audioElement.pause();
$("#status").text("Status: paused");
isread = 0;
}
});
$('#rewind').click(function() {
audioElement.currentTime -= 15;
if(audioElement.currentTime < 0) audioElement.currentTime = 0;
});
});
</script>
</head>
<div class="container">
<img class="icon" align="middle" src="http://pixelcolony.co.uk/host/audio-widget/icons/cartoon.png">
<h3>Character</h3>
<hr>
<table class="tg">
<tr>
<th class="tg-yw4l">
<input type="image" class="rewind" id="rewind" src="http://pixelcolony.co.uk/host/audio-widget/controls/Rewind-def.png" onMouseOver="this.src='http://pixelcolony.co.uk/host/audio-widget/controls/Rewind.png'" onMouseOut="this.src='http://pixelcolony.co.uk/host/audio-widget/controls/Rewind-def.png'">
</th>
<th class="tg-yw4l">
<input type="image" id="play" onclick="togglePlay();" class="playpause" src="http://pixelcolony.co.uk/host/audio-widget/controls/play.png">
</th>
<th class="tg-yw4l">
<input type="image" class="rewind" src="http://pixelcolony.co.uk/host/audio-widget/controls/Forward-def.png" onMouseOver="this.src='http://pixelcolony.co.uk/host/audio-widget/controls/Forward.png'" onMouseOut="this.src='http://pixelcolony.co.uk/host/audio-widget/controls/Forward-def.png'">
</th>
</tr>
</table>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment