HTML5 audio question

Ad Mulders · **Posted:** December 9th, 2014, 7:30 am

Hello,
I made some html5 audioplayers and they work great.
http://www.csnmedia.nl/jingle.htm
http://www.csnmedia.nl/jingle2.htm

I like to improve them by adding a progress bar but what am i doing wrong?
This is the script i use to load the mp3 file http://jsfiddle.net/Tv8Cm/
This is the progress bar script i like to use but i can't get it work in Opus:
http://jsfiddle.net/csnmedia/sypb1xvp/

Even if i make a 1:1 copy of the progress bar script in Opus only the buttons
and bar appear but it want play the mp3 file.

Kind regards,

Ad

mackavi · **Posted:** December 9th, 2014, 9:12 am

Seems fine - demo version:

http://sandbox.interaktiv.co.uk/forum/audio/

Are there any errors thrown in the console? And / or - do you have a live link to the version that fails?

</mack>

Ad Mulders · **Posted:** December 9th, 2014, 11:29 am

Hello Mac,

Thanks for you answer. I don't know what am i doing different or wrong but it want play.
I attched the .imp and maybe you can see what's wrong

Ad

mackavi · **Posted:** December 9th, 2014, 11:54 am

Do you realise that you don't appear to be loading jQuery?

</mack>

Ad Mulders · **Posted:** December 9th, 2014, 1:05 pm

What do you mean by loading jQuery?
EDIT
I copied <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
pasted in an HTML element and it works.
But how can i use the bar in the file you can load from your computer?

mackavi · **Posted:** December 9th, 2014, 1:21 pm

The code in your example: http://jsfiddle.net/csnmedia/sypb1xvp/ uses jQuery.

If you don't load the jQuery library, the code won't work.

You can used one of the CDNs or download it and include it with the project.

Easy way - add this to the HTML Header section in the settings during publish.

Code:

</mack>

Ad Mulders · **Posted:** December 9th, 2014, 5:17 pm

Thanks Mac, that works.
How do i use the progress bar with the other files other then the one who are already online.

Ad

mackavi · **Posted:** December 10th, 2014, 9:55 am

Just place everything in the HTML5 Object. No jQuery needed!

Code:

<button id="play">Play</button><button id="pause">Pause</button>
<progress id="seekbar" value="0" max="1" style="width:400px;"></progress>
<input id="audio_file" type="file" accept="audio/*" />
<audio id="audio_player" />


<script>
document.getElementById('play').addEventListener('click', function(){document.getElementById('audio_player').play();});
document.getElementById('pause').addEventListener('click', function(){document.getElementById('audio_player').pause();});
document.getElementById('audio_player').addEventListener('timeupdate',function(){var v = this.currentTime / this.duration;if (v > 0){document.getElementById('seekbar').value = v}});

audio_file.onchange = function(){
   document.getElementById('seekbar').value = 0;
    var files = this.files;
    var file = URL.createObjectURL(files[0]); 
    audio_player.src = file; 
    audio_player.load();
    audio_player.play();
};
</script>

Of course, in credit to Opus' new 9.5 features, you don't really need to use standard HTML5 elements. You could build a better interface in Opus and just call the necessary code.

</mack>

Ad Mulders · **Posted:** December 10th, 2014, 12:27 pm

Great work Mac. Thanks!

Digital Workshop

HTML5 audio question

Who is online