Brugervalgt afspilning af lyd

[Kurt Hansen]

Dette indlæg er flyttet hertil fra dk.edb.internet.webdesign.html
Message-ID: <pjk3jp$5fo$***@dont-email.me>

Vi har to webshops i en ældre udgave af OsCommerce. Vi tilbyder
afspilning af "soundbites" for alle tracks på vore CD'er (se f.eks.
https://www.danacordbutik.dk/product_info.php?products_id=43854).

OsC's database består af mange tabeller og felter, men det vareindhold
der vises på skærmen er det der står i feltet "products_description". Da
det er et "tekstfelt", er det således ikke en komplet HTML-dokument med
header og hele tjavsen.

Jeg afspiller "soundbites" med Javascript, men efter opgradering af
editoren i webshopsystemet, konstateres det åbenbart, at JS-koderne er
forældede. Editoren sletter derfor ALLE JS-koder med det resultatet, at
lydfiler ikke længere kan afspilles af brugeren.

Jeg søger derfor en løsning som kan afspille lydfiler "on demand" -
altså når brugeren klikker på pilen.

Jeg indleder mine varesider med dette:

<script type="text/javascript">
function afspil(kilde) {
var afspiller=document.getElementById('afspiller');
afspiller.style.display='';
afspiller.src=kilde;
afspiller.load();
afspiller.play();
}
</script>

På et passende sted dukker afspilleren op med følgende:

<audio controls="" id="afspiller" style="display:none;">
<source src="audio.mp3" type="audio/mpeg"; codecs="mp3"></source>
</audio>

Ved hvert track indsættes følgende kode:

<td>
<img src="Loading Image..." alt="Play"
onclick="afspil('https://s3-eu-west-1.amazonaws.com/danacord.com
/700-799/799/soundbites/799-01.mp3');">
</td>

[Kurt Hansen]

Post by Kurt Hansen
<audio controls="" id="afspiller" style="display:none;">
   <source src="audio.mp3" type="audio/mpeg"; codecs="mp3"></source>
</audio>

Min offline HTML-editor markerer disse linjer med fejl, men fortæller
mig ikke hvad fejlen(e) består i.

Linjerne har i mange år set således ud:

<audio id="afspiller" controls style="display:none;">
<source src="audio.mp3" type="audio/mpeg"; codecs="mp3"'>
</audio>

- og det har virket lige indtil jeg fik installeret en ny editor i
shoppens kontrolpanel (fra FCK-editor til CK-editor).

Linje 2 ser i mine JS-blinde øjne forkert ud og jeg har googlet for at
finde ud af det, men det er ikke lykkedes.

[Jan Hansen]

Post by Kurt Hansen

Post by Kurt Hansen
<audio controls="" id="afspiller" style="display:none;">
   <source src="audio.mp3" type="audio/mpeg"; codecs="mp3"></source>
</audio>

Min offline HTML-editor markerer disse linjer med fejl, men fortæller
mig ikke hvad fejlen(e) består i.

Der er ikke noget, der hedder "</source>"
Skal siden ligefrem validere, skal ; codecs="mp3" også væk,

<audio controls="" id="playler" style="display:none;">
<source src="audio.mp3" type="audio/mpeg">
</audio>

[Bertel Lund Hansen]

Post by Jan Hansen
Skal siden ligefrem validere, skal ; codecs="mp3" også væk,

Så skal der også ryddes op i tegnkodningsfejlene, og hvis det
skal gøres, skal der indføjes nogle linjeskift i koden som ellers
har uoverskueligt lange linjer.

[Kurt Hansen]

Post by Jan Hansen

Post by Kurt Hansen

Post by Kurt Hansen
<audio controls="" id="afspiller" style="display:none;">
   <source src="audio.mp3" type="audio/mpeg"; codecs="mp3"></source>
</audio>

Min offline HTML-editor markerer disse linjer med fejl, men fortæller
mig ikke hvad fejlen(e) består i.

Der er ikke noget, der hedder "</source>"

Ok, hermed fjernet.

Post by Jan Hansen
Skal siden ligefrem validere, skal ; codecs="mp3" også væk,

Ok, hermed fjernet.

Post by Jan Hansen
<audio controls="" id="playler" style="display:none;">
<source src="audio.mp3" type="audio/mpeg">
</audio

Jeg er overbevist om, at det er netop disse linjer der er kuk i; det det
dem som min offline editor (Komodo) hele tiden melder fejl på.

Her er den komplette kildekode (med reduceret tracklist):



<script type="text/javascript">
function afspil(cd,nummer) {
var tal = Math.floor(cd/100);
if (nummer < 10) nummer = '0'+nummer;
var url='https://s3-eu-west-1.amazonaws.com/danacord.com/' + tal +
'00-' + tal + '99/' + cd + '/soundbites/' + cd + '-' + nummer + '.mp3';
var afspiller=document.getElementById('afspiller');
afspiller.style.display='';
afspiller.src=url;
afspiller.load();
afspiller.play();
}
</script>
<table width="10" border="0">
<tr>
<td align="left" width="220">
<a href="Loading Image..."
data-lightbox="image-1" data-title="DACOCD 799">
<img src="Loading Image..." width="200"
height="200" alt="[Cover image]" align="bottom" border="1"></a><br />
<div style='width: 200px; text-align: center;'><i>Click for
large image</i></div>
</td>
<td style="vertical-align: middle; white-space: nowrap;">
<h1 class="hudenluft">Rarities of Piano Music</h1>
<br />
<h2 class="hudenluft">at »Schloss vor Husum«, vol. 31</h2>
<br />
<span class="linje3">from the 2017 Festival </span><br
/>&nbsp;<br />DACOCD 799 - Released 2018<br />&nbsp;<br />
<audio controls="" id="playler" style="display:none;">
<source src="audio.mp3" type="audio/mpeg">
</audio>
</td>
<td style="vertical-align:middle; text-align:center;
padding-left:20px; white-space:nowrap;">
Link to our webshop:<br /><a
href="http://www.danacordbutik.dk/shop/product_info.php?products_id=413"
target="_blank">
<img
src="Loading Image..."
width="200" alt="[Click the button to buy this CD]" align="bottom"
border="0"></a><br />
(opens in a new window)<br />
&nbsp;<br />&nbsp;<br />
<a href="../frmsets/records/797-98-r.html" target="_top"><img
src="Loading Image..." border="0" width="23"
height="18" align="bottom" alt="Previous CD"></a>
<a href="../frmsets/records/785-r.html" target="_top"><img
src="Loading Image..." border="0" width="23"
height="18" align="bottom" alt="Next CD"></a><br />
<span style="text-align:center;">Browse<br />catalogue</span>
</td>
<tr>
<td colspan="4">The annual piano festival featuring rare mainly
romantic piano music this year has among the pianists Marc-André
Hamelin. As usual the repertoire is fascinating with many piano pieces
receiving their first CD recording. All the previous years are available
and not to be missed.</td>
</tr>
<tr>
<td class="spilknap" onclick="play(784,2)"></td>
</tr>
</table>
<table class="cdcontent" summary="Content of DACOCD 799" border="0">
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td colspan="4"><b><a href="../frmsets/comp-ud/czerny-r.html"
target="_top">Carl Czerny</a></b>
</td>
<tr>
<td>[ 1 ]</td>
<td>Variations on a Theme by Rode »La Ricordanza«, op. 33</td>
<td>11:38</td>
<td><img src="https://danacord.com/res/grafik/play13.png"
alt="Play"
onclick="afspil('https://s3-eu-west-1.amazonaws.com/danacord.com/700-799/799/soundbites/799-01.mp3');"></td>
</tr>
</table>

[Jan Hansen]

Prøv om den viser nogle fejl i det her,

http://www.sniper-pistol.com/musik.html

Siden validerer, så viser Komodo fejl, er det nok
Komodo, der er noget galt med.

[Kurt Hansen]

Post by Jan Hansen
Prøv om den viser nogle fejl i det her,
http://www.sniper-pistol.com/musik.html
Siden validerer, så viser Komodo fejl, er det nok
Komodo, der er noget galt med.

Hmmm, jeg havde ikke lige lagt mærke til. at når jeg holder musepilen
hen over linjen i Komodo, så siger den at <AUDIO> ikke kan genkendes.

Oh well. Så er det vel et spørgsmål om hvilken doctype webshoppens
output understøtter? :-(

[Jan Hansen]

Post by Kurt Hansen
Hmmm, jeg havde ikke lige lagt mærke til. at når jeg holder musepilen
hen over linjen i Komodo, så siger den at <AUDIO> ikke kan genkendes.
Oh well. Så er det vel et spørgsmål om hvilken doctype webshoppens
output understøtter? :-(

Skal det være helt rigtigt, blev sådan noget <AUDIO> vel først opfundet
i html5, men sådan en editor burde vel ikke blande sig i, om man sætter
html5 tags ind i et html4 dokument.
Editoren Geany virker nu ganske fornuftigt, det har dog den irriterende
fejl, at det ikke husker filer åbnet over ftp imellem sessioner. Det
findes også til osx, <https://www.geany.org/download/releases>

Post by Kurt Hansen

Post by Kurt Hansen
var url='https://s3-eu-west-1.amazonaws.com/danacord.com/' + tal +
'00-' + tal + '99/' + cd + '/soundbites/' + cd + '-' + nummer + '.mp3';

Jeg lagde mærke til, at linien var blevet delt op i to i dit forrige
indlæg. Jeg har nu rettet eksemplet, så url bliver sat sammen over to linier,
så de enkelte linier ikke er lige så lange.

Hvis problemet på hjemmesiden opstået ved, at den CK-editor ikke kan gabe
over de meget lange linier, så prøv om du kan lave en side nu med det
fra eksemplet.

[Kurt Hansen]

Post by Jan Hansen

Post by Kurt Hansen
var url='https://s3-eu-west-1.amazonaws.com/danacord.com/' + tal +
'00-' + tal + '99/' + cd + '/soundbites/' + cd + '-' + nummer + '.mp3';

Jeg lagde mærke til, at linien var blevet delt op i to i dit forrige
indlæg. Jeg har nu rettet eksemplet, så url bliver sat sammen over to linier,
så de enkelte linier ikke er lige så lange.
Hvis problemet på hjemmesiden opstået ved, at den CK-editor ikke kan gabe
over de meget lange linier, så prøv om du kan lave en side nu med det
fra eksemplet.

Det må være din newsreader der deler linjen.

Når jeg forsøger at oprette en vare med denne kode
(http://danacord.com/jstest.html), sletter CK-editor i shoppen stadig
alt Javascript. Du kan se kildekoden i din browser.

Måske er det mig (ikke usandsynligt) der roder rundt i dine mange gode råd.

Funktionen hedder "afspil", men du kalder onclick="play(784,2)". Du
giver også cellen en class "spilknap", men hvor er den defineret?

[Jan Hansen]

Post by Kurt Hansen
Når jeg forsøger at oprette en vare med denne kode
(http://danacord.com/jstest.html), sletter CK-editor i shoppen stadig
alt Javascript. Du kan se kildekoden i din browser.

I kildekoden er javascript der nu stadigvæk som det øverste.

Post by Kurt Hansen
Funktionen hedder "afspil", men du kalder onclick="play(784,2)".

Ja, det passer ikke så godt sammen, der skal selvfølgelig stå enten
afspil eller play begge steder. Når jeg fandt på at omdøbe funktionen
var det for at gøre det muligt, at sætte funktionen ind i en af de .js
filer, der allerede indlæses på siden. Det vil jeg mene er mere enkelt
end at skulle skrive den ind på samtlige sider med soundbites.
Imidlertid giver det fejl at indlæse en .js fil med en function afspil
på en side, der allerede indeholder en function afspil. Derfor det nye
navn.

Der er et tilsvarende problem på linie 6 og 28, med hhv
getElementById('afspiller');
og
<audio controls="" id="player"

Hvor der enten skal stå afspiller eller player begge steder.

Post by Kurt Hansen
Du giver også cellen en class "spilknap", men hvor er den defineret?

Det er det css fra linie 9 til 15 i eksemplet, det er til at indsætte i
en css fil, der i forvejen indlæses på siderne.

[Jan Hansen]

Post by Jan Hansen
Det er det css fra linie 9 til 15 i eksemplet, det er til at indsætte i
en css fil, der i forvejen indlæses på siderne.

Jeg har opdateret eksemplet, så spilknap står i bunden af "varesider.css",
og function play i bunden af "lightzap.js"

Så skulle det gerne virke, hvis ikke den ck-editor også sletter
onclick="play(799,2)"

[Kurt Hansen]

Post by Jan Hansen

Post by Jan Hansen
Det er det css fra linie 9 til 15 i eksemplet, det er til at indsætte i
en css fil, der i forvejen indlæses på siderne.

Jeg har opdateret eksemplet, så spilknap står i bunden af "varesider.css",
og function play i bunden af "lightzap.js"
Så skulle det gerne virke, hvis ikke den ck-editor også sletter
onclick="play(799,2)"

Puha, nu skal vi holde tungen lige i bukserne. Den udvikler der har
installeret CK-editoren er kommet hjem fra ferie og skriver, at nu har
han fixet problemet.

Jeg kan ikke se at der skulle være rettet i lightzap.js og varesider.css?

Klap lige hesten, Jan. Hvis flere retter i de samme filer, går der kage
i den. Jeg skal nok melde tilbage.

[Jan Hansen]

Post by Kurt Hansen
Puha, nu skal vi holde tungen lige i bukserne. Den udvikler der har
installeret CK-editoren er kommet hjem fra ferie og skriver, at nu har
han fixet problemet.

Det er jo godt nok, hvis det så virker.

Post by Kurt Hansen
Jeg kan ikke se at der skulle være rettet i lightzap.js og varesider.css?

Nej, jeg har jo kun rettet dem på eksempel-siden. Hvis du går derind og vælger
"vis koder", kan du klikke på lightzap.js og varesider.css, og se tilføjelserne
i bunden af dem.

[Kurt Hansen]

Post by Jan Hansen

Post by Kurt Hansen
Puha, nu skal vi holde tungen lige i bukserne. Den udvikler der har
installeret CK-editoren er kommet hjem fra ferie og skriver, at nu har
han fixet problemet.

Det er jo godt nok, hvis det så virker.

Post by Kurt Hansen
Jeg kan ikke se at der skulle være rettet i lightzap.js og varesider.css?

Nej, jeg har jo kun rettet dem på eksempel-siden. Hvis du går derind og vælger
"vis koder", kan du klikke på lightzap.js og varesider.css, og se tilføjelserne
i bunden af dem.

Hmmm, ham der har opgraderet editoren har "fixet" et problem, men svarer
undvigende når jeg spørger efter hvad fejlen var. Efter at have ryddet
min browsercache virkede alt som normalt.

Jeg vil dog gerne lege videre med nogle af dine ideer, men jeg holder
lige en miniferie.

[Jan Hansen]

Post by Kurt Hansen
Hmmm, ham der har opgraderet editoren har "fixet" et problem, men svarer
undvigende når jeg spørger efter hvad fejlen var.

Mon ikke det er noget her fra:
https://drupal.stackexchange.com/questions/40235/how-to-stop-ckeditor-3-6-3-7474-from-stripping-script-tags

Når ckeditor ikke virker med <script> og Komodo ikke virker med <audio>,
har jeg fjernet begge dele i eksemplet.
Så vidt jeg husker, står der alt="Play" ved knapperne, for at siden skal kunne
bruges af blinde. Det har jeg så udvidet lidt, så knapperne kan betjenes med
tastatur i stedet for mus. Det er selvfølgelig stadig uden der skal stå noget
"svært" i den afdeling, der har noget med Komodo eller CKEditor at gøre.

[Kurt Hansen]

Post by Jan Hansen

Post by Kurt Hansen
Hmmm, ham der har opgraderet editoren har "fixet" et problem, men svarer
undvigende når jeg spørger efter hvad fejlen var.

https://drupal.stackexchange.com/questions/40235/how-to-stop-ckeditor-3-6-3-7474-from-stripping-script-tags

Ahaaaa! Genialt, Jan :-)

Post by Jan Hansen
Når ckeditor ikke virker med <script> og Komodo ikke virker med <audio>,
har jeg fjernet begge dele i eksemplet.
Så vidt jeg husker, står der alt="Play" ved knapperne, for at siden skal kunne
bruges af blinde. Det har jeg så udvidet lidt, så knapperne kan betjenes med
tastatur i stedet for mus. Det er selvfølgelig stadig uden der skal stå noget
"svært" i den afdeling, der har noget med Komodo eller CKEditor at gøre.

Det er smart, Jan og jeg vil gerne implementere det, men det må vente
til efter min "miniferie".

[Jan Hansen]

Post by Kurt Hansen
Det er smart, Jan og jeg vil gerne implementere det, men det må vente
til efter min "miniferie".

Det render nok heller ingen steder. God ferie.