I'm trying to use the following code to play music:

    ogg = new Audio();
    ogg.src = "music_fight.mp3";
    ogg.loop=true;
    ogg.load();
    ogg.play();
    set ("ogg",ogg);

The strange thing is - it works in my test program. I've put in various fake sections and can change the music from file to file. But when I put it into my large game, nothing.

I originally put it in as a function but it didn't work. I eventually just put it at the very top of all my javascripts, and still nothing. This is driving me crazy. What sort of thing might disable this in a specific squiffy file?

Further investigation shows that it seems that you need to click through a section to make the music work. So, this works...

[[start]]:

[[main]]

[[main]]:
    ogg = new Audio();
    ogg.src = "music_fight.mp3";
    ogg.loop=true;
    ogg.load();
    ogg.play();
    set ("ogg",ogg);
    
[[main]]

[[main]]:

...yet this does not.

[[start]]:

    ogg = new Audio();
    ogg.src = "music_fight.mp3";
    ogg.loop=true;
    ogg.load();
    ogg.play();
    set ("ogg",ogg);
    
[[main]]

[[main]]:

Can anyone explain this to me?

Probably the response to those 'crazy frog' popup ads a few years back. Most browsers don't allow automatic audio playback anymore, it has to be triggered by the user clicking something within the page.

Makes sense. To get around it, I had to add a forward page that you need to click by. A little annoying but not insurmountable. Came up with some nice art that adds to the mood.

Thanks for the explanation.

I have a question. I've uploaded a fan-fic fight simulator demo. While the background music plays, when I hit refresh, it stops playing music. Is there a certain JavaScript or HTML code solution for that? I don't want to manually play it back, just automatically.

Almost sounds like it purposely shut down, but we'd have to see the code.

Here is the code.

CODE:

[[PBZ-STARTING-GAME]]:
@title Primal Battle Z Arcade Demo
@set music_code = on
@set arcadematchset = 2
@set randomopponent = ON

        setTimeout(function(){ squiffy.story.go("PBZ MAIN MENU-PRE"); }, 5000);

- This game is inspired by several fighting games, animated shows, anime and comics.
- This is a fight simulator demo.
<!-- Default Settings at the start = music_code = on, arcadematchset = 2 -->

[[PBZ MAIN MENU-PRE]]:
@clear
<center><img class="primalbattlezlogo"></center><br>
<center> Demo Version </center><br>
<center>[[Click to Play]](Proceed)</center>
<center> Version 1.05 </center>

[[Proceed]]:
        setTimeout(function(){ squiffy.story.go("Music-Menu"); }, 0);
        setTimeout(function(){ squiffy.story.go("PBZ MAIN MENU-PRE-2"); }, 0);

[[PBZ MAIN MENU-PRE-2]]:
<!-- Left Side - Player Basic Attack Accuracy -->
{@plaleftaccu_leftkick=50,plaleftaccu_rightkick=50,plaleftaccu_leftpunch=50,plaleftaccu_rightpunch=50,plaleftaccu_grapple=50,plaleftaccu_special=50}

<!-- Right Side - Computer Difficulty -->
{@cpudifficulty=50}

<!-- Arcade Mode Setting -->
{PBZ MAIN MENU}


[[PBZ MAIN MENU]]:
@clear

<center><img class="primalbattlezlogo"></center><br>
<center> Demo Version </center><br>
<center>[[Arcade Mode]](Arcade Mode)</center>
<center>[[Story Mode]](PBZ - Story Mode Demo)</center>
<center>[[In-Game Settings]](Game Settings Menu-Preview)</center>
<center> Character List - Coming Soon </center> 
<!-- <center>[[Character List]](Character List Menu)</center> -->
<center>[[Audio Test]](Audio Settings)</center>
<center> Tutorial - Coming Soon </center>
<center>[[Version Notes]](Version Patch Notes)</center>
<!-- Updating characters and features -->
<!-- <center>[[Arcade Mode Version 2]](Arcade Mode Version 2)</center> -->

-- CODE THAT PLAYS THE MUSIC---
[[Music-Menu]]:
@clear
    ogg = new Audio();
    ogg.src = "alexander-nakarada-cold-journey.ogg";
    ogg.load(); ogg.play(); ogg.loop = true;
    set ("ogg-audio",ogg);


---------------------------------------------------------------------------------------------------------------------------------------------------------------------
[[OPP-CHOICE-FINAL-RANDOM]]:
<center>
{if music_stage=1: Selected: Stage 1} {if music_stage=2: Selected: Stage 2} {if music_stage=3: Selected: Stage 3} {if music_stage=4: Selected: Stage 4: The Sanctuary}<br>
Your Opponent is: {if varcharranset=BLK:Blackfire} {if varcharranset=STA:Starfire} {if varcharranset=FOX:Foxy} {if varcharranset=SOU:Sousuke} {if varcharranset=YOM:Yomi} {if varcharranset=STO:Storm} {if varcharranset=LEE:Lee Sagara} {if varcharranset=KAG:Kagura} {if varcharranset=SAY:Saya} {if varcharranset=BIG:Bigby} {if varcharranset=RUS:Rushuna Tendo} {if varcharranset=ROB:Robin} {if varcharranset=KGM:Kagome} {if varcharranset=SAN:Sango} {if varcharranset=INU:InuYasha} {if varcharranset=REV:Revy} {if varcharranset=HAR:Harley Quinn} {if varcharranset=TES:Tessa} {if varcharranset=TER:Terra} {if varcharranset=BER:Beryl}

{if varcharranset=BLK: {if varset=0: [[<img class="picpan001">]](001-Blackfire-OPP0) } {if varset=1: [[<img class="picpan001">]](001-Blackfire-OPP1) } {if varset=2: [[<img class="picpan001">]](001-Blackfire-OPP2) } {if varset=3: [[<img class="picpan001">]](001-Blackfire-OPP3) } }
{if varcharranset=STA: {if varset=0: [[<img class="picpan002">]](002-Starfire-OPP0) } {if varset=1: [[<img class="picpan002">]](002-Starfire-OPP1) } {if varset=2: [[<img class="picpan002">]](002-Starfire-OPP2) } {if varset=3: [[<img class="picpan002">]](002-Starfire-OPP3) } }
{if varcharranset=FOX: {if varset=0: [[<img class="picpan003">]](003-Foxy-OPP0) } {if varset=1: [[<img class="picpan003">]](003-Foxy-OPP1) } {if varset=2: [[<img class="picpan003">]](003-Foxy-OPP2) } {if varset=3: [[<img class="picpan003">]](003-Foxy-OPP3) } }
{if varcharranset=SOU: {if varset=0: [[<img class="picpan004">]](004-Sousuke-OPP0) } {if varset=1: [[<img class="picpan004">]](004-Sousuke-OPP1) } {if varset=2: [[<img class="picpan004">]](004-Sousuke-OPP2) } {if varset=3: [[<img class="picpan004">]](004-Sousuke-OPP3) } }
{if varcharranset=YOM: {if varset=0: [[<img class="picpan005">]](005-Yomi-OPP0) } {if varset=1: [[<img class="picpan005">]](005-Yomi-OPP1) } {if varset=2: [[<img class="picpan005">]](005-Yomi-OPP2) } {if varset=3: [[<img class="picpan005">]](005-Yomi-OPP3) } }
{if varcharranset=STO: {if varset=0: [[<img class="picpan006">]](006-Storm-OPP0) } {if varset=1: [[<img class="picpan006">]](006-Storm-OPP1) } {if varset=2: [[<img class="picpan006">]](006-Storm-OPP2) } {if varset=3: [[<img class="picpan006">]](006-Storm-OPP3) } }
{if varcharranset=LEE: {if varset=0: [[<img class="picpan007">]](007-Lee Sagara-OPP0) } {if varset=1: [[<img class="picpan007">]](007-Lee Sagara-OPP1) } {if varset=2: [[<img class="picpan007">]](007-Lee Sagara-OPP2) } {if varset=3: [[<img class="picpan007">]](007-Lee Sagara-OPP3) } }
{if varcharranset=KAG: {if varset=0: [[<img class="picpan008">]](008-Kagura-OPP0) } {if varset=1: [[<img class="picpan008">]](008-Kagura-OPP1) } {if varset=2: [[<img class="picpan008">]](008-Kagura-OPP2) } {if varset=3: [[<img class="picpan008">]](008-Kagura-OPP3) } }
{if varcharranset=SAY: {if varset=0: [[<img class="picpan010">]](010-Saya-OPP0) } {if varset=1: [[<img class="picpan010">]](010-Saya-OPP1) } {if varset=2: [[<img class="picpan010">]](010-Saya-OPP2) } {if varset=3: [[<img class="picpan010">]](010-Saya-OPP3) } }
{if varcharranset=BIG: {if varset=0: [[<img class="picpan011">]](011-Bigby-OPP0) } {if varset=1: [[<img class="picpan011">]](011-Bigby-OPP1) } {if varset=2: [[<img class="picpan011">]](011-Bigby-OPP2) } {if varset=3: [[<img class="picpan011">]](011-Bigby-OPP3) } }
{if varcharranset=RUS: {if varset=0: [[<img class="picpan013">]](013-Rushuna Tendo-OPP0) } {if varset=1: [[<img class="picpan013">]](013-Rushuna Tendo-OPP1) }
{if varset=2: [[<img class="picpan013">]](013-Rushuna Tendo-OPP2) } {if varset=3: [[<img class="picpan013">]](013-Rushuna Tendo-OPP3) } }
{if varcharranset=ROB: {if varset=0: [[<img class="picpan021">]](021-Robin-OPP0) } {if varset=1: [[<img class="picpan021">]](021-Robin-OPP1) } {if varset=2: [[<img class="picpan021">]](021-Robin-OPP2) } {if varset=3: [[<img class="picpan021">]](021-Robin-OPP3) } }
{if varcharranset=KGM: {if varset=0: [[<img class="picpan041">]](041-Kagome-OPP0) } {if varset=1: [[<img class="picpan041">]](041-Kagome-OPP1) } {if varset=2: [[<img class="picpan041">]](041-Kagome-OPP2) } {if varset=3: [[<img class="picpan041">]](041-Kagome-OPP3) } }
{if varcharranset=SAN: {if varset=0: [[<img class="picpan043">]](043-Sango-OPP0) } {if varset=1: [[<img class="picpan043">]](043-Sango-OPP1) } {if varset=2: [[<img class="picpan043">]](043-Sango-OPP2) } {if varset=3: [[<img class="picpan043">]](043-Sango-OPP3) } }
{if varcharranset=INU: {if varset=0:[[<img class="picpan044">]](044-InuYasha-OPP0) } {if varset=1:[[<img class="picpan044">]](044-InuYasha-OPP1) } {if varset=2:[[<img class="picpan044">]](044-InuYasha-OPP2) } {if varset=3:[[<img class="picpan044">]](044-InuYasha-OPP3) } }
{if varcharranset=REV: {if varset=0: [[<img class="picpan045">]](045-Revy-OPP0) } {if varset=1: [[<img class="picpan045">]](045-Revy-OPP1) } {if varset=2: [[<img class="picpan045">]](045-Revy-OPP2) } {if varset=3: [[<img class="picpan045">]](045-Revy-OPP3) } }
{if varcharranset=HAR: {if varset=0: [[<img class="picpan056">]](056-Harley Quinn-OPP0) } {if varset=1: [[<img class="picpan056">]](056-Harley Quinn-OPP1) } {if varset=2: [[<img class="picpan056">]](056-Harley Quinn-OPP2) } {if varset=3: [[<img class="picpan056">]](056-Harley Quinn-OPP3) } }
{if varcharranset=TES: {if varset=0:[[<img class="picpan070">]](070-Tessa-OPP0) } {if varset=1:[[<img class="picpan070">]](070-Tessa-OPP1) } {if varset=2:[[<img class="picpan070">]](070-Tessa-OPP2) } {if varset=3:[[<img class="picpan070">]](070-Tessa-OPP3) } }
{if varcharranset=TER: {if varset=0: [[<img class="picpan073">]](073-Terra-OPP0) } {if varset=1: [[<img class="picpan073">]](073-Terra-OPP1) } {if varset=2: [[<img class="picpan073">]](073-Terra-OPP2) } {if varset=3: [[<img class="picpan073">]](073-Terra-OPP3) } }
{if varcharranset=BER: {if varset=0: [[<img class="picpan080">]](080-Beryl-OPP0) } {if varset=1: [[<img class="picpan080">]](080-Beryl-OPP1) } {if varset=2: [[<img class="picpan080">]](080-Beryl-OPP2) } {if varset=3: [[<img class="picpan080">]](080-Beryl-OPP3) } }



<!-- Computer Select with Variation Choices -->
<!-- 01: Blackfire -->
[[001-Blackfire-OPP0]]:
    ogg.pause(); ogg.currentTime = 0;
    set("rightside",01); set("cpu2RIGHTVARch00st00",0001);
    setTimeout(function(){ squiffy.story.go("CHA-Blackfire-Right Side"); }, 0);
    setTimeout(function(){ squiffy.story.go("RightSideFinished"); }, 0);

[[001-Blackfire-OPP1]]:
    ogg.pause(); ogg.currentTime = 0;
    set("rightside",01); set("cpu2RIGHTVARch00st00",1001);
    setTimeout(function(){ squiffy.story.go("CHA-Blackfire-Right Side"); }, 0);
    setTimeout(function(){ squiffy.story.go("RightSideFinished"); }, 0);

[[001-Blackfire-OPP2]]:
    ogg.pause(); ogg.currentTime = 0;
    set("rightside",01); set("cpu2RIGHTVARch00st00",2001);
    setTimeout(function(){ squiffy.story.go("CHA-Blackfire-Right Side"); }, 0);
    setTimeout(function(){ squiffy.story.go("RightSideFinished"); }, 0);

[[001-Blackfire-OPP3]]:
    ogg.pause(); ogg.currentTime = 0;
    set("rightside",01); set("cpu2RIGHTVARch00st00",3001);
    setTimeout(function(){ squiffy.story.go("CHA-Blackfire-Right Side"); }, 0);
    setTimeout(function(){ squiffy.story.go("RightSideFinished"); }, 0);

Any update?

Was this copied correctly? Up near the top, seven lines down, you suddenly go into code mode. There there are two bulleted lines. I doubt that's your problem. It just looks weird is all.

Also, if that weird line is code, it's not in the right place - JS should go above the squiffy stuff.

I am certainly not the sound guy as I was pulling chunks of example code down to make mine work. Let me see if I can get this to run.

No, I had no luck getting it to run. That line seven-down,

setTimeout(function(){ squiffy.story.go("PBZ MAIN MENU-PRE"); }, 5000);

...is not right.

Cool. Thanks. I'm going to upload my unique tutorials for users.

By the way, maybe if I can remove the @clear function for the simple song code path? Will that help?

That line looks right to me.

When you post code, put a line of 3 backticks (```) above it and another one below. This will make sure your code is displayed like it should be. If you're having trouble typing backticks (they're usually on the key below 'Esc', but it's different on some keyboard layouts), there's 3 to the right of the reply box → that you can copy and paste.

By the way, I use the 3 backticks you've talked about. Thanks for the tip.