Playing external music (OGG) desktop vs online?

CheeseMyBaby
20 Apr 2018, 12:41

The first act of my game is almost done. I'm about to start writing music for it but before I do I'd like to ask a couple of questions:

  1. If I have all my ogg-files (or wav, or whichever is the most compatible format?) and link to them in the code.
    Does the player's choice of "platform" (online vs desktop) make the result come out differently or will both options work as well as the other?

  2. Is ogg-files the best way to go? (I've been looking around but haven't really found an answer to this.)

  3. I asked this before with vague answers; did anyone try to incorporate MIDI (into the game file ?)

thanks.


J_J
20 Apr 2018, 14:12

I've only used mp3, a lot of the games here don't use music. Hopefully some people with more experience chimes in, but you might need to do some experimenting... particularly on whether MIDI files even work :/

Also, I'm jealous how quickly you are progressing on your game :p Good luck on the middle and the music writing.


CheeseMyBaby
20 Apr 2018, 14:17

@J_J
Oh I can assure you there's nothing to be jealous about! I decided to split my game in to 3 acts. The first one will be the shortest and it's that one I'm getting closer to finishing.

Ok, so you've used mp3, that's cool. How do you implement it? Do you have it on an external space and link to it?
Are you using a lib or the build in play sound?


mrangel
20 Apr 2018, 15:23

MIDI files will work if the player's browser supports them.
Online, that depends on the player. On desktop, i believe the browser will be Chromium.

A quick search suggests that Chrome has a number of extensions to let it play MIDI files, but it can't do so natively.


K.V.
20 Apr 2018, 15:43

The desktop player has embedded Chromium, which does not handle the mp3 or mp4 formats when played using HTML tags or my AudioVideo library.

...but Alex added play sound to play mp3 files through ffmpeg (or something; the script plays the audio through Quest, not the embedded browser).

http://docs.textadventures.co.uk/quest/adding_sounds.html#browser-compatibility


K.V.
20 Apr 2018, 15:49

If I have all my ogg-files (or wav, or whichever is the most compatible format?) and link to them in the code.
Does the player's choice of "platform" (online vs desktop) make the result come out differently or will both options work as well as the other?

The browser makes all the difference. I think anything can handle WAV files, but they are BIG, and this site's max game size is 20MB.

http://docs.textadventures.co.uk/quest/adding_sounds.html#browser-compatibility

Is ogg-files the best way to go? (I've been looking around but haven't really found an answer to this.)

No, because they don't play on iStuff (iPhone or iPad).

I asked this before with vague answers; did anyone try to incorporate MIDI (into the game file ?)

Have never tried this one, but if mrangel is correct (and he usually is), you might as well forget about using MIDI. That sounds like a can of worms to me.


I include an mp3 and ogg for each sound to cover the bases.


Also, make sure you change your game.publishfileextensions attribute to include *.ogg! Otherwise, your ogg file will not be included with your game!!!


K.V.
20 Apr 2018, 15:52

Also keep in mind that your sounds will not play in any mobile browser if you don't display the audio controls!

If you use play sound, the mobile player totally ignores the audio and ends any sync which may exist to continue play.

If you are using my AudioVideo library, it will check for a mobile browser and automatically display the controls if necessary.

AUTOPLAY will NOT work on a mobile browser, no matter what.


K.V.
20 Apr 2018, 15:54

This is quite extensive (although it does not reference MIDI files at all):

http://docs.textadventures.co.uk/quest/adding_sounds.html

There is additional info here (but not much):

http://textadventures.co.uk/games/view/phvys9dicuimsspr_m9wyq/audiovideolib


Dcoder
20 Apr 2018, 16:43

@KV -
Just curious, what is the advantage of using your AV library over Quest's built-in sound/video? You already mentioned that your AV lib can play sound over mobile, while Quest does not.


K.V.
20 Apr 2018, 17:01

Lots of stuff.

Basically, everything that this shows you how to do in code can be added via the GUI.

You can use local and/or external sounds...

You can play multiple sounds at once....

You can pause and resume sounds...

Lots of stuff...

I've listed it all here:

http://textadventures.co.uk/games/view/phvys9dicuimsspr_m9wyq/audiovideolib


CheeseMyBaby
20 Apr 2018, 17:19

K.V.
Ok, that answers most of my questions! Only one remains:

The one thing I'm still unsure of is if the user have to bundle the sound into the game or is it possible to ONLY use external (linked) files (no matter what the file extension)?

( I copy/pasted this question from this thread )

Edit: Oh, and I've optimized my game for iUsers about..... 0%. I see no point in starting caring about them now :)


K.V.
20 Apr 2018, 19:00

AV lib can play sound over mobile, while Quest does not.

You can add JS functions via JS.eval() during play to get around this and make the mobile player behave as expected while still using the default play sound and stop sound scripts.


The default play sound script takes three parameters:
play sound (string file, boolean wait, boolean loop)

This is the JS function (in its current state) that is called when playing in a mobile browser:

function playAudio(filename, format, sync, looped) {
    if (sync) {
        finishSync();
    }
}

This is the stop sounds function:

function stopAudio() {
}

The workaround:

(This will display the audio controls after the command input bar, just to improve player experience.)

Create a function called SetupMobilePlaySound

Add one parameter: useless

Paste this in for your script in Code View:

EDITED: Version 2

// Only added the useless parameter so this can be called in JS with ASLEvent('SetupMobilePlaySound', '')
s = Chr(60)+"script"+Chr(62)+"var audioSyncing = false;var syncHidingInput = false;"
s = s + "function playAudio(filename, format, sync, looped) { console.log(filename);"
  s = s + "if (sync && looped){ throw ('Cannot sync and loop the same audio!');}"
  s = s + "var s = '"+Chr(60)+"audio id=\"audio-'+filename+'\" src=\"'+filename+'\" controls controlsList=\"nodownload\"/"+Chr(62)+"';"
  s = s + "addTextAndScroll(s); if (sync) { audioSyncing = true; if (isElementVisible('#txtCommandDiv')){ syncHidingInput=true; }"
    s = s + "_waitMode = true; $('#txtCommandDiv').hide(); $('#inputBar').hide(); markScrollPosition();"
    s = s + "document.getElementById('audio-'+filename).onended = function(){ $('#txtCommandDiv').show(); endWait();  this.remove(); }     }"
  s = s + "else if (looped){ document.getElementById('audio-'+filename).loop = true;  } $('audio').insertAfter($('#txtCommandDiv')); };"
s = s + "function stopAudio() { $('audio').remove();"
  s = s + "if (syncHidingInput){   $('#txtCommandDiv').show();  if ($('#inputBar') != undefined) {   $('#inputBar').show();  }"
    s = s + "syncHidingInput=false; }  if (!_waitMode){  return;  }  _waitMode = false;"
  s = s + "window.setTimeout(function () {   $('#fldUIMsg').val('endwait');  $('#cmdSubmit').click(); }, 100);}"
s = s + Chr(60)+"/script"+Chr(62)+"Audio has been set to MOBILE SETTINGS!"
msg (s)

I've set up a command to allow the user to enter MOBILE AUDIO, which will run this script:

SetupMobilePlaySound ("")
// This next bit will play a sound using the new function just so I can make sure it works in all versions of the player
// There is no need to play a sound here, if you don't want to play a test sound.
// Add 2 second timeout to give the browser time to set up the functions
SetTimeout (2) {
  JS.playAudio (GetFileURL("themp3.mp3"), "mp3", false, false)
}

Here is my tester:

http://textadventures.co.uk/games/view/wvlh6nzhq0ubvwdjtgnnua/mobile-play-sound

Here's the entire code:

<!--Saved by Quest 5.7.6606.27193-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Mobile Play Sound">
    <gameid>0235b205-6b4b-408d-ab29-8be05fec909c</gameid>
    <version>0.0.3</version>
    <firstpublished>2018</firstpublished>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <description><![CDATA[{command:test audio}<br/><br/>{command:test loop}<br/><br/>{command:test sync}<br/><br/>{command:stop audio}<br/><br/>{command:mobile audio:set to mobile audio}]]></description>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command name="mobile_audio_cmd">
    <pattern>mobile audio</pattern>
    <script>
      SetupMobilePlaySound ("")
      // Add 2 second timeout to give the browser time to set up the functions
      SetTimeout (2) {
        JS.playAudio (GetFileURL("themp3.mp3"), "mp3", false, false)
      }
    </script>
  </command>
  <command name="test_audio_cmd">
    <pattern>test audio</pattern>
    <script>
      stop sound
      play sound ("themp3.mp3", false, false)
    </script>
  </command>
  <command name="test_audio_cmd1">
    <pattern>test loop</pattern>
    <script>
      stop sound
      play sound ("themp3.mp3", false, true)
    </script>
  </command>
  <command name="test_audio_cmd2">
    <pattern>test sync</pattern>
    <script>
      stop sound
      play sound ("themp3.mp3", true, false)
    </script>
  </command>
  <command name="stop_audio_cmd">
    <pattern>stop audio</pattern>
    <script>
      stop sound
    </script>
  </command>
  <function name="SetupMobilePlaySound" parameters="useless"><![CDATA[
    // Only added the useless parameter so this can be called in JS with ASLEvent('SetupMobilePlaySound','')
    s = Chr(60)+"script"+Chr(62)+"var audioSyncing = false;var syncHidingInput = false;"
    s = s + "function playAudio(filename, format, sync, looped) { console.log(filename);"
      s = s + "if (sync && looped){ throw ('Cannot sync and loop the same audio!');}"
      s = s + "var s = '"+Chr(60)+"audio id=\"audio-'+filename+'\" src=\"'+filename+'\" controls controlsList=\"nodownload\"/"+Chr(62)+"';"
      s = s + "addTextAndScroll(s); if (sync) { audioSyncing = true; if (isElementVisible('#txtCommandDiv')){ syncHidingInput=true; }"
        s = s + "_waitMode = true; $('#txtCommandDiv').hide(); $('#inputBar').hide(); markScrollPosition();"
        s = s + "document.getElementById('audio-'+filename).onended = function(){ $('#txtCommandDiv').show(); endWait();  this.remove(); }     }"
      s = s + "else if (looped){ document.getElementById('audio-'+filename).loop = true;  }$('audio').insertAfter($('#txtCommandDiv')); };"
    s = s + "function stopAudio() { $('audio').remove();"
      s = s + "if (syncHidingInput){   $('#txtCommandDiv').show();  if ($('#inputBar') != undefined) {   $('#inputBar').show();  }"
        s = s + "syncHidingInput=false; }  if (!_waitMode){  return;  }  _waitMode = false;"
      s = s + "window.setTimeout(function () {   $('#fldUIMsg').val('endwait');  $('#cmdSubmit').click(); }, 100);}"
    s = s + Chr(60)+"/script"+Chr(62)+"Audio has been set to MOBILE SETTINGS!"
    msg (s)
  ]]></function>
</asl>

Note that you can check for the mobile browser like this:

function isMobilePlayer(){
    if (typeof(currentTab) === 'string'){
	    return true;
    }
    return false;
};

Pertex posted a different script (which I liked better than mine), but I can't find the post and they both work, so...

We could add this to game.inituserinterface to check for the mobile player and automatically enable the mobile audio functionality:

SetTimeout(2){
  JS.eval(" if (typeof(currentTab) === 'string'){ASLEvent('SetupMobilePlaySound', '');}")
}

K.V.
20 Apr 2018, 19:04

The one thing I'm still unsure of is if the user have to bundle the sound into the game or is it possible to ONLY use external (linked) files (no matter what the file extension)?

If you have the sound hosted on an external site and you only link to that from within your game, there is no need to include the audio file in your game.

So, if your source is like https://whatever.com/mysound.mp3, you do not need to add the file to your game folder.

But, if your source is loading a local file, like GetFileURL("mysound.mp3"), you DO need to add the file to your game folder.


This applies to all file extensions and all file types.

If you are accessing a local file during play, that file must be in your main game's folder AND you must be sure the extension is included in game.publishfileextensions.


K.V.
20 Apr 2018, 21:14

Oh, and I've optimized my game for iUsers about..... 0%. I see no point in starting caring about them now :)

Just you wait. The reports will come pouring in.

"The sounds don't work!"

"Doing [so-and-so] makes the game freeze up!"

They'll all be playing on mobile devices or outdated browsers.

Once you add sounds, especially if they are important to the game, you have to go way out of your way to avoid issues on all the different players.

The desktop player does stuff neither the web player nor the mobile player will do.

The web player and the mobile player do stuff the desktop player won't do.

The web player does stuff neither the mobile player nor the desktop player will do.

(I don't think the mobile player can do anything the the web player can't do.)

Quest 5.7.2 can do stuff Quest 5.6.3 can't do.

It's all about the differences in browser functionality, and this sometimes concerns things other than audio and video. And this concerns all HTML-related stuff, not just Quest.


In an effort to remain as sane as possible, I made one game so it won't play on mobile.

If it finds the mobile browser when the game loads, it simply ends the game and prints, "Sorry. This game cannot be played in a mobile browser!".


Dcoder
20 Apr 2018, 22:42

I almost went insane reading that...


K.V.
21 Apr 2018, 03:52

https://en.wikipedia.org/wiki/MP3#Licensing,_ownership_and_legislation

It's a bunch of red tape. (Ha! I've always wanted to be able to slide that into a conversation!)

Chromium is open-source, so they didn't include the 3rd party software (which was (is?)) needed to play mp3/mp4. (Linux does the same thing. When installing derivatives of Ubuntu, you are asked if you'd like to install third party software to have mp3/mp4 functionality during the installation.)

The desktop player runs games in an embedded Chromium browser, so the browser itself will not play mp3s or mp4s. (This means you can't add them to the game with HTML <audio> or <video> tags. The only way mp3s play in the desktop player is by using the built-in play sound script.)

I don't have access to a Mac or any Apple devices, but I've had friends test everything out for me by posting test games online.

Macs will play .ogg, .ogv, .mp3, and .mp4. iPads and iPhones, however, will only play .mp3 and .mp4.


As far as mobile browsers not having the autoplay feature, thus needing to have controls is concerned, this goes for all mobile browsers, not just iStuff.

They say this is for the customer. It protects them from unintentional high data usage.


SORT OF NOT OFF-TOPIC:

Another thing we need to keep in mind is the font we choose.

It's not a big of a deal as the audio/video formats, but the user still needs the font we choose installed on their device for our font to display correctly.

...unless we load a web font.

To do that, we can set it in the GUI when using only one web font. If using multiple web fonts, in "User Interface Initialisation", add this:

// Edit this list to include/exclude any font from fonts.google.com.
// Mind your capitalization and spacing!!!
game.webfonts = Split("Chicle;Indie Flower;Anton;Lobster;Press Start 2P")
foreach (font, game.webfonts) {
  SetWebFontName (font)
}
// Assuming your initial font is the default font and not a web font, use the next line of code.  If not, comment out the next line and uncomment the last line of code.
SetFontName (game.defaultfont)
// If your initial font is a web font, and you set it up in the editor (or before this script),  uncomment the next line.
//SetWebFontName(game.defaultwebfont)

CheeseMyBaby
22 Apr 2018, 19:13

Guess I'll add a line to the first 'warning screen' about music/sound not working on mobile devices and how the player is a complete moron for wanting to play a parser game on their phone/tab (it's all in line with the rhetoric of my game so I feel completely chill in doing so)

[Rant from a non coder]


Isn't it a bit wierd though? That it should take this much work to have functioning sounds/music in your game?
I mean...
Game. Music.Sounds.
A g a m e with m u s i c? It's hardly an uncommon feature.
To some (read: to me) music is as important to a good game as storyline.
Kid Icarus (NES) is to this day one of my favourite games and that's, hands down, because of the music.
As a kid, when starting playing it, I didn't like the game. The only reason I kept playing it was because of the music (and then, of course, the game grew on me and I played it a whole lot)

[/Rant from a non coder]


K.V.
22 Apr 2018, 21:49

EDITED

It's not Quest's fault.

It's the world's fault. This is the stuff you have to deal with when using the internet.


CheeseMyBaby
23 Apr 2018, 08:11

Lol. Indeed it is so.

I've written my first character theme and tried to incorporate it in the game last night (using your audvidlib) and it's working like a charm! (see for yourself, you have the link ;)
I've uploaded mp3 and ogg versions of everything I've written so far. With your lib, it was no way near the hassle I expected it to be.
Forget my last post!


K.V.
23 Apr 2018, 20:17

With your lib, it was no way near the hassle I expected it to be.

Awesome!

Sometimes, I get tired of adding the same code to each new game, and a library is born. (And sometimes the library doesn't suck! Bwahahahaha!)


CheeseMyBaby
24 Apr 2018, 07:32

All the better for people like me (slow learners) to reap the rewards of your hard work. Muwauhwa.