Thread: New audio player preview

solid audio playback is arguably one of the most important things here on lcwo.net.

When the site first went online in 2008, the only viable option was using an audio player using the Flash plugin. Fast forward to 2014, all current versions of major browsers support the new HTML5 audio tag, which allows native audio playback in the browser, without the need for any third party software.

On LCWO.net, the first HTML5 player was already rolled out in 2010, but few people actually used it because Flash was the default for compatibility reasons. With many more target platforms (like tablet PCs) emerging, some of which didn't support Flash at all, something new needed to be found:

On the new preview version of LCWO, the MediaElement.js player is used. It automatically selects a suitable playback method based on what the browser accessing it can do. HTML5 audio gets the highest priority, followed by fall-back solutions for Flash and Silverlight.

There's no more need for any user interaction; a user logging on from any device should get a working setup.

Since my capabilities for testing this on many platforms are limited, I am counting on your feedback. So far I have verified that everything works with the latest versions of Firefox and Chrome, and Opera Mini on Android.

Please, have a look at http://preview.lcwo.net/ and give it a try. If you encounter any problems, or even if everything works as expected, please reply in this thread, ideally specifying your Operating System and version (e. g. Windows 7), the browser used (e. g. Firefox 34.0) and the result of your test.

Thanks a lot!
Fabian, DJ1YFK

PS: The preview version operates with the same database, e.g. your training attempts will be saved as usual. As soon as the new player is stable enough for general use, it will be merged into the main website.

Opera appears to use the HTML5 audio element with OGG files instead of MP3. IE8 on WinXP uses the Flash fallback which seems to have some quirks, at least for in QTC training.

I think the next step is to provide MP3 and/or OGG files with higher bit-rates. I know that different decoders can produce pretty different output at low bit rates, and maybe that's one of the problems we are seeing here.

Work for me (Win 8.1 / latest Chrome Stable), but in the "Klartext-Training" When I press the second time "Abspielen" nothing happen. I have to go back with the slider. But it works for me because goal is to copy all in one pass.

I have now changed the configuration of the audio player to actually try Flash audio first, and use HTML5 as a fall-back. I don't like this as much as the opposite, but it might help Georg with Opera and Bill with Ubuntu Studio. Please let me know if you see any changes.

In the end I might go back to the default of HTML5 with Flash fall-back, but with a little checkbox where users can then chose to disable HTML5 altogether and only use Flash.

it probably is using the Flash version, because you have Flash installed.

Thanks also for the info about HTML5 working on the main site. The difference is that I am using the OGG audio format exclusively for HTML5 on the main site and for Firefox (because up to version 21 it didn't even support MP3) but here on the preview the audio-player gets supplied with both OGG and MP3 and it can chose which it prefers. I suppose it uses MP3 then. In my recent tests, it appears that only Opera still requires the OGG format.

Anyway, I am happy that it seems to be working fine for you now in all configuration options. I will wait for some more data points but right now it looks like the new player is a good option.

Second try with the new version, this time on my wife's iMac with OSX 10.5.8.

In Morse Machine, something seems not right. When the P sounds, if I make a mistake (it was deliberate -- really!), the P repeats, but when I press the P key, the next letter does NOT sound until pressing any key. Then the sound that didn't happen repeats, and everything's fine. But it's not just the P; there are several letters like that: the G and 5 keys do that too. But it's the letter AFTER those keys that doesn't sound...

The rest of the site seems to work well, except for some annoying clicks in the TX training.

Keep working at the site, Fabian, and we'll keep reporting. And if you find a way to make the site help me learn to copy CW faster and more accurately, I'd appreciate it. :)

Neil, thanks for the info. Weird about those single letters; I wonder if it was the same before I switched the default to Flash this morning. Probably, in the end I will make it a user setting whether to have "Default Flash, fall-back HTML5" or "Default HTML5, fall-back Flash". With both option probably 90%+ of all users should not have a problem initially, and the remaining ones will easily be able to change.

Also thanks Georg; I know that there are still some ("original") Opera enthusiasts. One of them happens to be my wife :-)

Glad you like the new delete function - it was very easy to implement and probably saves some users a lot of time and bandwidth. I should look for other things on the page which would benefit in a similar fashion.

Next steps on the roadmap, by the way, are finally properly storing all configuration values beyond a login-session and then finally allowing "infinite" logins with a permanent cookie, if the user wishes....

Problems: MorseMachine
As has been said earlier, I also see problems with single letters. It is exactly the same thing that Neil said above. I encountered the problem each time "." was the letter before the next one (e.g. "p"). Two "." right after each other, however, are fine... strange.

But it's not limited to MorseMachine. It shows the same behavior in the call trainer as well. If the suffix is "/p"

Another difference compared to the flash player v10 version I'm currently using:
When working call trainer: Sometimes I want to repeat the call before the playback is finished by hitting "." . Flash player would just stop the replay and restart from the beginning.

The new player does start a new replay from the beginning but the first one keeps playing.

So far,

thanks a lot for all your work you put in this site.
Merry christmas to all...

I'm quite satisfied with the OLD solution, when I'm able to select the player myself.

With the existing setup, I've had no problems with the playback itself on different systems, i.e. when the particular type was supported of course.
But I prefer the possibility to select the player myself.
I appreciate the possibility to select different player according to its look also, especially with different screen resolution and/or different page zoom (magnification), when the player body zooms differently from its box in particular browsers.

I also prefer OGG to mp3. I think it should be prefered where possible.
I do like & use the possibility to set the volume independently to the system volume.

I only tested the NEW setup in an outdated installation of Mandriva 2011 and Chromium 20.0.some.thing from 2012 yet. (I don't normally use this system, not on unknown sites... I's just an inter-state of a rebuilding action before some more recent Linux will be installed. I use both Linux and Windows (7 enterprise, 7 Professional and even XP pro) on different machines.)

Result:
- The tone pitch is much, much lower than the 800 Hz selected (and compared to Flash in a second tab of the same system/browser)
- The "Sound sample" can't be played second time
- The player doesn't even show any slider to move back.

[update]
After updating Flash player, the player works. Repeat is possible, slider is shown.
BUT the tone PITCH is still lower then set.
Hm, slider shows, but can't be operated. Will start the playback and breaks the sound completely.
[/update]

So please, even if you add any automation (that complicates and slows down the browser-server communication also), please leave at least some possibility for manual selection.
Or keep it simple and don't touch working setup. :-)

Even WebSDR has manual selection of the HTML5 options, both for sound and for waterfall.

I apologize for my conservative approach. But this is how I can see it. World is not perfect... :-)

thanks for your input. There are several issues with the new player that are quite annoying, so I am actually rethinking the whole issue. I suppose a gold plan B would be to keep the old players but add some detection code which e.g. suggests HTML5 for users with non-flash browsers, without forcing anything on the user...

Something to reflect about over the coming days, in which I will take a break from coding ;-)

I was still editing my message when you have replied... :-))) Quite early in the morning,
especially today.
[edit]
So were you, as I can see. Or I've just missed your final note about the airport when first reading. This explains the early hour... :)
[/edit]

I also had a minor problem using MorseMachine. If I missed a character (i.e I was sent an 'A' but I hit the 'N' key instead), when the character was resent and I got it right, MM would stall and not send the next character.

I didn't read through the entire thread so if someone mentioned this already, just disregard is post.

After two weeks of vacation without touching the code, I decided I will not use the new player after all, but instead use the old player options but additionally add some code that tries to suggest the best possible option for each user. This can still be overridden manually.

Most of the work is actually already done, because I wrote an unified interface for the different players, so this should be online in the not too distant future.

bug on Mac Safari 8.0
url: http://preview.lcwo.net/courselesson
then i press 'Letters in this lesson: K M U (click on a character to hear it)' on M
text left 'Listen to Character: U'
and play two audio file in parallel

1)Running the audioplayer and listening - okay !
2)Pause the audioplayer - okay !
3)Then going back in time with the time-bar to listen to previous letters --> audio starts automatically.
4)Trying to pause the audioplayer again --> audio starts playing a second sequence in parallel to the actual playing sequence --> overlay of audiostreams --> NOT OKAY !
5) Cannot stop the automatically started audiostream when moving the time-bar !

In the old flash version, there is a start/pause button on the player-plugin to stop it. In the new audio player it is missing. There is only the "Abspielen/Pause" Button.

AHA! With the new audio player, the "Listen to Character"feature works right, and I can listen to characters other than the mosst recent one. But it doesn't show the older characters when I review them (I'm on lesson 32 and the character shown is always the quetstion mark, whether I listen to the ?, the B, or the = symbol. But the audio is what's important, and that works. Thank you Fabian.

solid audio playback is arguably one of the most important things here on lcwo.net.

When the site first went online in 2008, the only viable option was using an audio player using the Flash plugin. Fast forward to 2014, all current versions of major browsers support the new HTML5 audio tag, which allows native audio playback in the browser, without the need for any third party software.

On LCWO.net, the first HTML5 player was already rolled out in 2010, but few people actually used it because Flash was the default for compatibility reasons. With many more target platforms (like tablet PCs) emerging, some of which didn't support Flash at all, something new needed to be found:

On the new preview version of LCWO, the [b]MediaElement.js[/a][/b] player is used. It automatically selects a suitable playback method based on what the browser accessing it can do. HTML5 audio gets the highest priority, followed by fall-back solutions for Flash and Silverlight.

There's no more need for any user interaction; a user logging on from any device should get a working setup.

Since my capabilities for testing this on many platforms are limited, I am counting on your feedback. So far I have verified that everything works with the latest versions of Firefox and Chrome, and Opera Mini on Android.

Please, have a look at http://preview.lcwo.net/[/a] and give it a try. If you encounter any problems, or even if everything works as expected, please reply in this thread, ideally specifying your Operating System and version (e. g. Windows 7), the browser used (e. g. Firefox 34.0) and the result of your test.

Thanks a lot!
Fabian, DJ1YFK

PS: The preview version operates with the same database, e.g. your training attempts will be saved as usual. As soon as the new player is stable enough for general use, it will be merged into the main website.[/quote]