0

Set up simple code for an audio playlist of two mp3's and tested in JSFiddle...seemed to be working, but on upload, only plays the first clip in Chrome and Safari, and plays nothing at all in Opera and Firefox. I'm using both mp3's and ogg's so maybe it's about my "ended" function...? "ended" doesn't have to mean "loaded" right? Help!, anyone...?

JS:

var chant = document.getElementById("music");
chant.addEventListener("ended", function() {
chant2 = document.getElementById("music2");
chant2.play();
});

HTML:

<audio id="music" autoplay="autoplay"><br>
<source src="http://www.siddhicenter.org/media/GANAPATIVEDCSTUTI.ogg" type="audio/ogg" /><br>
<source src="http://www.siddhicenter.org/media/GANAPATIVEDCSTUTI.mp3" type="audio/mpeg" /><br>
Your browser does not support the audio element.<br>
</audio>
<audio id="music2" loop="loop" ><br>
<source src="http://www.siddhicenter.org/media/OmNamahShivaya.ogg" type="audio/ogg" /><br>
<source src="http://www.siddhicenter.org/media/OmNamahShivaya.mp3" type="audio/mpeg" /><br>
Your browser does not support the audio element.<br>
</audio>

Thanks in advance...

Lady J
  • 1
  • Are you sure you uploaded the ogg files? I get `"NetworkError: 404 Not Found - http://www.siddhicenter.org/media/GANAPATIVEDCSTUTI.ogg" "NetworkError: 404 Not Found - http://www.siddhicenter.org/media/OmNamahShivaya.ogg"` on FF. – Fabrício Matté Aug 19 '12 at 22:55
  • Sorry, I'm just getting back for a response, but yes, ogg and mp3 files are up on the site... – Lady J Aug 20 '12 at 02:27
  • Did upload all files, mp3 links are working, but ogg's don't seem to be. Not sure what's up...? – Lady J Aug 20 '12 at 20:49
  • Make sure you've uploaded them and they're in `.ogg` format, trying to open the links return a 404: http://www.siddhicenter.org/media/OmNamahShivaya.ogg – Fabrício Matté Aug 20 '12 at 20:50
  • Definitely uploaded, both in .ogg and .mp3...as I typed earlier, mp3's are working, not ogg. Any ideas? But even with mp3's, only first clip plays, not second. Maybe I wrote my "ended" wrong?... – Lady J Aug 20 '12 at 22:39
  • Works as expected for me on Chrome, check this [fiddle](http://jsfiddle.net/ult_combo/u4Ym2/). I removed the `
    `s as they don't belong inside an audio tag, also make sure to place your script either after the audio tags or wrap it inside the DOM ready/window's load event. It won't work in FF or Opera because the browser can't find the ogg files in the path you specified (either they're not public or in another folder/different name, so I commented those out).     – Fabrício Matté Aug 20 '12 at 23:12
  • Thank you very much for the code cleanup, but I'm still perplexed about my ogg files, as they are in the exact same public folder as the mp3's. Anything that might correct that?, as they should be working in Firefox and Opera as well. Also, altho the fiddle works, on upload to site locale, the clips still don't sequence in ANY browser. Gotta say, I'm stumped. – Lady J Aug 21 '12 at 00:54
  • Ok, solved the "not-working-in-Chrome" issue by your script-after-audio-tags solution (didn't work in load event), thanks...still have ogg file problem, tho... – Lady J Aug 21 '12 at 01:22
  • Check this [jsbin](http://jsbin.com/umihif/2/), works fine with Chrome and Firefox now. Here's the [full code](http://jsbin.com/umihif/2/edit). I converted the mp3s and hosted them on opendrive.com, seems like it's some problem with your server serving `ogg` files. – Fabrício Matté Aug 21 '12 at 02:02
  • Thanks much, Fabricio...I think that might do it, but I'm still testing with ogg files off of another server. All I can say to Go Daddy is, "ba-a-a-d, ba-a-a-d hoster"... :)) – Lady J Aug 21 '12 at 21:24

1 Answers1

0

I guess you are in windows host.

add web.config in your root directory. add add the ff code:

<configuration>
 <system.webServer>
   <staticContent>
   <remove fileExtension=".ogg" />
     <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
   </staticContent>
 </system.webServer>
</configuration>

If you have already configuration tag

insert the ff:

<staticContent>
   <remove fileExtension=".ogg" />
 <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
</staticContent>

under your system.webServer tag.

ex:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="wordpress" patternSyntax="Wildcard">
            <match url="*"/>
                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
                </conditions>
            <action type="Rewrite" url="index.php"/>
        </rule></rules>
    </rewrite>
<staticContent>
   <remove fileExtension=".ogg" />
 <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
   </staticContent>
  </system.webServer>  
</configuration>
Jun Sanchez
  • 1