diff --git a/_sources/lectures/TWP56/TWP56_1.rst b/_sources/lectures/TWP56/TWP56_1.rst
index 4d9feee304..4b01c360e8 100644
--- a/_sources/lectures/TWP56/TWP56_1.rst
+++ b/_sources/lectures/TWP56/TWP56_1.rst
@@ -8,28 +8,32 @@ DJ Mix
    :align: center
    :alt: 
 
+.. activecode:: lecture_56_1_es
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-.. code-block :: python
+   from browser import document, html
 
-   from tkinter import *
-   import pygame.mixer
-
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
-
-   som = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   audio_url = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
 
    def start():
-      track.play(loops = -1)
+      document['track'].play()
+      print("Audio iniciado")
+
    def stop():
-      track.stop()
-
-   track = mixer.Sound(som)
-   start_botao = Button(app, command = start, text = 'Start')
-   start_botao.pack(side = LEFT)
-   stop_botao = Button(app, command = stop, text = 'Stop')
-   stop_botao.pack(side = RIGHT)
-   app.mainloop()
+      document['track'].pause()
+      document['track'].currentTime = 0
+      print("Audio detenido")
+
+   audio_element = html.AUDIO(id='track', src=audio_url)
+   document <= audio_element
+
+   start_button = html.BUTTON('Iniciar')
+   start_button.bind('click', lambda ev: start())
+
+   stop_button = html.BUTTON('Detener')
+   stop_button.bind('click', lambda ev: stop())
+
+   document <= start_button
+   document <= stop_button
\ No newline at end of file
diff --git a/_sources/lectures/TWP56/TWP56_1_en.rst b/_sources/lectures/TWP56/TWP56_1_en.rst
index 069acb665a..2660b98e2a 100644
--- a/_sources/lectures/TWP56/TWP56_1_en.rst
+++ b/_sources/lectures/TWP56/TWP56_1_en.rst
@@ -8,29 +8,33 @@ DJ Mix
    :align: center
    :alt: 
 
+.. activecode:: lecture_56_1_en
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-.. code-block:: python
+   from browser import document, html
 
-   from tkinter import *
-   import pygame.mixer
-
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
-
-   som = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   audio_url = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
 
    def start():
-      track.play(loops=-1)
-   
+      document['track'].play()
+      print("Audio started")
+
    def stop():
-      track.stop()
-
-   track = mixer.Sound(som)
-   start_button = Button(app, command=start, text='Start')
-   start_button.pack(side=LEFT)
-   stop_button = Button(app, command=stop, text='Stop')
-   stop_button.pack(side=RIGHT)
-   app.mainloop()
\ No newline at end of file
+      document['track'].pause()
+      document['track'].currentTime = 0
+      print("Audio stopped")
+
+   audio_element = html.AUDIO(id='track', src=audio_url)
+   document <= audio_element
+
+   start_button = html.BUTTON('Start')
+   start_button.bind('click', lambda ev: start())
+
+   stop_button = html.BUTTON('Stop')
+   stop_button.bind('click', lambda ev: stop())
+
+   document <= start_button
+   document <= stop_button
+   
\ No newline at end of file
diff --git a/_sources/lectures/TWP56/TWP56_2.rst b/_sources/lectures/TWP56/TWP56_2.rst
index 67ef229f7c..bf493ebf5c 100644
--- a/_sources/lectures/TWP56/TWP56_2.rst
+++ b/_sources/lectures/TWP56/TWP56_2.rst
@@ -9,36 +9,48 @@ Pero la canción no termina...
    :alt: 
 
 
-.. code-block :: python
+.. activecode:: lec56es1fdarhg
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-   from tkinter import *
-   import pygame.mixer
+   from browser import document, html
 
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
+   sonido = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
 
-   som = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   def iniciar():
+      pista.play()
+      print("Audio iniciado")
 
-   def start():
-      track.play(loops = -1)
-   def stop():
-      track.stop()
-   def termina():
-      track.stop()
-      app.destroy()
+   def detener():
+      pista.pause()
+      pista.currentTime = 0
+      print("Audio detenido")
 
-   track = mixer.Sound(som)
-   start_botao = Button(app, command = start, text = 'Start')
-   start_botao.pack(side = LEFT)
-   stop_botao = Button(app, command = stop, text = 'Stop')
-   stop_botao.pack(side = RIGHT)
+   def terminar(ev):
+      pista.pause()
+      if app_div in document:
+         app_div.remove()
+      print("Aplicación terminada")
 
-   app.protocol('WM_DELETE_WINDOW',terminal)
-   app.mainloop()
+   elemento_audio = html.AUDIO(src=sonido)
 
+   boton_iniciar = html.BUTTON('Iniciar')
+   boton_iniciar.bind('click', lambda ev: iniciar())
+
+   boton_detener = html.BUTTON('Detener')
+   boton_detener.bind('click', lambda ev: detener())
+
+   app_div = html.DIV()
+   app_div <= elemento_audio
+   app_div <= boton_iniciar
+   app_div <= boton_detener
+
+   document <= app_div
+
+   document.bind('beforeunload', terminar)
+
+   pista = elemento_audio
 
 Un solo botón
 -------------
@@ -50,32 +62,40 @@ Un solo botón
    :alt: 
 
 
-.. code-block :: python
+.. activecode:: lecture_56_2_es
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-   from tkinter import *
-   import pygame.mixer
+   from browser import document, html
 
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
+   sonido = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
 
-   som = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   def terminar():
+      pista.pause()
+      if app_div in document:
+         app_div.remove()
 
-   def termina():
-      track.stop()
-      app.destroy()
-   def muda():
-      if tocando.get() == 1:
-         track.play(loops = -1)
+   def cambiar(ev):
+      if ev.target.checked:
+         pista.play()
       else:
-         track.stop()
+         pista.pause()
+
+   elemento_audio = html.AUDIO(src=sonido)
+
+   boton_reproduccion = html.INPUT(type='checkbox')
+   etiqueta_reproduccion = html.LABEL('Reproducir sonido', style={'margin-left': '10px'})
+   etiqueta_reproduccion <= boton_reproduccion
+
+   app_div = html.DIV()
+   app_div <= elemento_audio
+   app_div <= etiqueta_reproduccion
+
+   document <= app_div
+
+   boton_reproduccion.bind('change', cambiar)
 
-   track = mixer.Sound(som)
-   tocando = IntVar()
-   tocar = Checkbutton(app,variable = tocando, command = muda, text = som)
-   tocar.pack()
+   document.bind('beforeunload', terminar)
 
-   app.protocol('WM_DELETE_WINDOW',terminal)
-   app.mainloop()
+   pista = elemento_audio
diff --git a/_sources/lectures/TWP56/TWP56_2_en.rst b/_sources/lectures/TWP56/TWP56_2_en.rst
index 218406535c..f88a42a9a1 100644
--- a/_sources/lectures/TWP56/TWP56_2_en.rst
+++ b/_sources/lectures/TWP56/TWP56_2_en.rst
@@ -8,35 +8,48 @@ But the song never ends...
    :alt: 
 
 
-.. code-block :: python
+.. activecode:: lecture_56_2_en
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-   from tkinter import *
-   import pygame.mixer
+   from browser import document, html
 
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
-
-   sound = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   sound = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
 
    def start():
-      track.play(loops = -1)
+      track.play()
+      print("Audio started")
+
    def stop():
-      track.stop()
-   def terminate():
-      track.stop()
-      app.destroy()
+      track.pause()
+      track.currentTime = 0
+      print("Audio stopped")
+
+   def terminate(ev):
+      track.pause()
+      if app_div in document:
+         app_div.remove()
+      print("Application terminated")
+
+   audio_element = html.AUDIO(src=sound)
+
+   start_button = html.BUTTON('Start')
+   start_button.bind('click', lambda ev: start())
+
+   stop_button = html.BUTTON('Stop')
+   stop_button.bind('click', lambda ev: stop())
+
+   app_div = html.DIV()
+   app_div <= audio_element
+   app_div <= start_button
+   app_div <= stop_button
+
+   document <= app_div
 
-   track = mixer.Sound(sound)
-   start_button = Button(app, command = start, text = 'Start')
-   start_button.pack(side = LEFT)
-   stop_button = Button(app, command = stop, text = 'Stop')
-   stop_button.pack(side = RIGHT)
+   document.bind('beforeunload', terminate)
 
-   app.protocol('WM_DELETE_WINDOW',terminate)
-   app.mainloop()
+   track = audio_element
 
 
 One button only
@@ -49,32 +62,41 @@ One button only
    :alt: 
 
 
-.. code-block :: python
+.. activecode:: lec56esdgdbf
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-   from tkinter import *
-   import pygame.mixer
+   from browser import document, html
 
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
-
-   sound = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   sound = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
 
    def terminate():
-      track.stop()
-      app.destroy()
-   def switch():
-      if playing.get() == 1:
-         track.play(loops = -1)
+      track.pause()
+      if app_div in document:
+         app_div.remove()
+
+   def switch(ev):
+      if ev.target.checked:
+         track.play()
       else:
-         track.stop()
+         track.pause()
+
+   audio_element = html.AUDIO(src=sound)
+
+   play_button = html.INPUT(type='checkbox')
+   play_label = html.LABEL('Play Sound', style={'margin-left': '10px'})
+   play_label <= play_button
+
+   app_div = html.DIV()
+   app_div <= audio_element
+   app_div <= play_label
+
+   document <= app_div
+
+   play_button.bind('change', switch)
+
+   document.bind('beforeunload', terminate)
 
-   track = mixer.Sound(sound)
-   playing = IntVar()
-   play_button = Checkbutton(app, variable = playing, command = switch, text = sound)
-   play_button.pack()
+   track = audio_element
 
-   app.protocol('WM_DELETE_WINDOW',terminate)
-   app.mainloop()
\ No newline at end of file
diff --git a/_sources/lectures/TWP56/TWP56_3.rst b/_sources/lectures/TWP56/TWP56_3.rst
index 52885c6434..e83e96611e 100644
--- a/_sources/lectures/TWP56/TWP56_3.rst
+++ b/_sources/lectures/TWP56/TWP56_3.rst
@@ -8,41 +8,43 @@ Se ve genial, ¡ahora agreguemos un volumen!
    :alt: 
 
 
-.. code-block :: python
+.. activecode:: lect_56_3_es
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-   from tkinter import *
-   import pygame.mixer
+   from browser import document, html
 
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
+   def toggle_play(ev):
+      if ev.target.checked:
+         document['audio_player'].play()
+      else:
+         document['audio_player'].pause()
 
-   som = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   def change_volume(ev):
+      document['audio_player'].volume = float(ev.target.value)
+
+   audio_src = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
+
+   audio_player = html.AUDIO(src=audio_src, id='audio_player')
+
+   toggle_button = html.INPUT(type='checkbox', id='toggle_play')
+   toggle_button.bind('change', toggle_play)
+   toggle_label = html.LABEL('Reproducir sonido')
+   toggle_label <= toggle_button
+
+   volume_slider = html.INPUT(type='range', id='volume', min='0', max='1', step='0.1')
+   volume_slider.bind('input', change_volume)
+   volume_label = html.LABEL('Volumen')
+   volume_label <= volume_slider
+
+   app_div = html.DIV(id='app')
+   app_div <= audio_player
+   app_div <= toggle_label
+   app_div <= volume_label
+
+   document <= app_div
 
-   def termina():
-      track.stop()
-      app.destroy()
-   def muda():
-      if tocando.get() == 1:
-         track.play(loops = -1)
-      else:
-         track.stop()
-   def muda_volume(v):
-      track.set_volume(volume.get())
-
-   track = mixer.Sound(som)
-   tocando = IntVar()
-   tocar = Checkbutton(app,variable = tocando, command = muda, text = som)
-   tocar.pack(side = LEFT)
-   volume = DoubleVar()
-   volume.set(track.get_volume())
-   escala = Scale(variable = volume , from = 0.0 , to = 1.0 , resolution = 0.1, command = muda_volume, label = 'Volume',orient = HORIZONTAL)
-
-   escala.pack(side = RIGHT)
-   app.protocol('WM_DELETE_WINDOW',terminal)
-   app.mainloop()
 
 
 .. image:: ../img/TWP56_010.jpg
diff --git a/_sources/lectures/TWP56/TWP56_3_en.rst b/_sources/lectures/TWP56/TWP56_3_en.rst
index 1015729af8..68837a6fbb 100644
--- a/_sources/lectures/TWP56/TWP56_3_en.rst
+++ b/_sources/lectures/TWP56/TWP56_3_en.rst
@@ -8,42 +8,42 @@ It looks great, now let's add some volume!
    :alt: 
 
 
-.. code-block :: python
+.. activecode:: lecture_56_3_en
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-   from tkinter import *
-   import pygame.mixer
+   from browser import document, html
 
-   app = Tk()
-   app.title('DJ Mix')
-   app.geometry('250x100+200+100')
+   def toggle_play(ev):
+      if ev.target.checked:
+         document['audio_player'].play()
+      else:
+         document['audio_player'].pause()
 
-   som = '50459_M_RED_Nephlimizer.wav'
-   mixer = pygame.mixer
-   mixer.init()
+   def change_volume(ev):
+      document['audio_player'].volume = float(ev.target.value)
 
-   def terminate():
-      track.stop()
-      app.destroy()
-   def toggle_play():
-      if playing.get() == 1:
-         track.play(loops = -1)
-      else:
-         track.stop()
-   def change_volume(v):
-      track.set_volume(volume.get())
-
-   track = mixer.Sound(som)
-   playing = IntVar()
-   toggle = Checkbutton(app, variable=playing, command=toggle_play, text=som)
-   toggle.pack(side=LEFT)
-   volume = DoubleVar()
-   volume.set(track.get_volume())
-   scale = Scale(variable=volume, from_=0.0, to=1.0, resolution=0.1, command=change_volume, label='Volume', orient=HORIZONTAL)
-
-   scale.pack(side=RIGHT)
-   app.protocol('WM_DELETE_WINDOW', terminate)
-   app.mainloop()
+   audio_src = 'https://bigsoundbank.com/UPLOAD/mp3/0751.mp3'
+
+   audio_player = html.AUDIO(src=audio_src, id='audio_player')
+
+   toggle_button = html.INPUT(type='checkbox', id='toggle_play')
+   toggle_button.bind('change', toggle_play)
+   toggle_label = html.LABEL('Play Sound')
+   toggle_label <= toggle_button
+
+   volume_slider = html.INPUT(type='range', id='volume', min='0', max='1', step='0.1')
+   volume_slider.bind('input', change_volume)
+   volume_label = html.LABEL('Volume')
+   volume_label <= volume_slider
+
+   app_div = html.DIV(id='app')
+   app_div <= audio_player
+   app_div <= toggle_label
+   app_div <= volume_label
 
+   document <= app_div
 
 .. image:: ../img/TWP56_010.jpg
    :height: 15.024cm
diff --git a/_sources/lectures/TWP58/TWP58_2.rst b/_sources/lectures/TWP58/TWP58_2.rst
index f618023471..cf37524c6d 100644
--- a/_sources/lectures/TWP58/TWP58_2.rst
+++ b/_sources/lectures/TWP58/TWP58_2.rst
@@ -19,34 +19,61 @@ Clase = fábrica de objetos
 Clase SoundPanel
 ----------------
 
-.. code-block :: python
+.. activecode:: lect_58_2_es
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
 
-   from tkinter import *
-   import pygame.mixer
+   from browser import document, html
+
+   class PanelSonido:  # Panel de Sonido (Sound Panel)
+      def __init__(self, archivo_sonido):  # Archivo de Sonido (Sound File)
+          self.archivo_sonido = archivo_sonido
+          self.pista = html.AUDIO(src=archivo_sonido)
+          self.reproduciendo = False
+          self.volumen = 1.0
+
+      def alternar_pista(self, ev):  # Alternar Pista (Track Toggle)
+          if self.reproduciendo:
+              self.pista.pause()
+              print("Deteniendo:", self.archivo_sonido)
+          else:
+              self.pista.play()
+              print("Reproduciendo:", self.archivo_sonido)
+          self.reproduciendo = not self.reproduciendo
+
+      def cambiar_volumen(self, ev):  # Cambiar Volumen (Change Volume)
+          self.volumen = float(ev.target.value)
+          self.pista.volume = self.volumen
+          print("Volumen cambiado a:", self.volumen)
+
+   contenedor_app = html.DIV(id='app')  # Contenedor de la Aplicación (App Container)
 
-   class SoundPanel(Frame):
-      def track_toggle(self):
-         if self.track_playing.get() == 1:
-            self.track.play(loops = -1)
-         else:
-            self.track.stop()
-      def change_volume(self,v):
-         self.track.set_volume(self.volume.get())
-      def __init__(self,app,mixer,sound_file):
-         Frame.__init__(self,app)
-         self.track = mixer.Sound(sound_file)
-         self.track_playing = IntVar()
-         track_button = Checkbutton(self,variable = self.track_playing,command = self.track_toggle,text = sound_file)
-         track_button.pack(side = LEFT)
-         self.volume = DoubleVar()
-         self.volume.set(self.track.get_volume())
-         volume_scale = Scale(self,variable = self.volume, from_ = 0.0, to = 1.0, resolution = 0.1, command = self.change_volume, label = "Volume", orient = HORIZONTAL)
-         volume_scale.pack(side = RIGHT)
+   panel_sonido = PanelSonido('https://bigsoundbank.com/UPLOAD/mp3/0751.mp3')
 
+   boton_pista = html.INPUT(type='checkbox')
+   boton_pista.bind('change', panel_sonido.alternar_pista)
+
+   etiqueta_pista = html.LABEL('Reproducir Sonido')  # Etiqueta de Pista (Track Label)
+   etiqueta_pista <= boton_pista
+
+   slider_volumen = html.INPUT(type='range', min='0', max='1', step='0.1')
+   slider_volumen.bind('input', panel_sonido.cambiar_volumen)
+
+   etiqueta_volumen = html.LABEL('Volumen')  # Etiqueta de Volumen (Volume Label)
+   etiqueta_volumen <= slider_volumen
+
+   contenedor_app <= panel_sonido.pista
+   contenedor_app <= etiqueta_pista
+   contenedor_app <= etiqueta_volumen
+
+   document <= contenedor_app
 
 Programa principal
 ------------------
 
++ Prueba ejecutar este código en tu PC y observa cómo genera dinámicamente paneles de sonido para archivos WAV en tu directorio.
+
 .. code-block :: python
 
    from tkinter import *
diff --git a/_sources/lectures/TWP58/TWP58_2_en.rst b/_sources/lectures/TWP58/TWP58_2_en.rst
index 0749d9c13d..84d02d40a8 100644
--- a/_sources/lectures/TWP58/TWP58_2_en.rst
+++ b/_sources/lectures/TWP58/TWP58_2_en.rst
@@ -19,34 +19,62 @@ Class = object factory
 Class SoundPanel
 ----------------
 
-.. code-block :: python
+.. activecode:: lect_58_2_en
+   :nocodelens:
+   :language: python3
+   :python3_interpreter: brython
+
+   from browser import document, html
+
+   class SoundPanel:
+      def __init__(self, sound_file):
+        self.sound_file = sound_file  # Add this line
+        self.track = html.AUDIO(src=sound_file)
+        self.track_playing = False
+        self.volume = 1.0
+
+      def track_toggle(self, ev):
+         if self.track_playing:
+            self.track.pause()
+            print("Stopping:", self.sound_file)
+         else:
+            self.track.play()
+            print("Playing:", self.sound_file)
+         self.track_playing = not self.track_playing
 
-   from tkinter import *
-   import pygame.mixer
+      def change_volume(self, ev):
+         self.volume = float(ev.target.value)
+         self.track.volume = self.volume
+         print("Volume changed to:", self.volume)
 
-   class SoundPanel(Frame):
-      def track_toggle(self):
-         if self.track_playing.get() == 1:
-            self.track.play(loops = -1)
-         else:
-            self.track.stop()
-      def change_volume(self,v):
-         self.track.set_volume(self.volume.get())
-      def __init__(self,app,mixer,sound_file):
-         Frame.__init__(self,app)
-         self.track = mixer.Sound(sound_file)
-         self.track_playing = IntVar()
-         track_button = Checkbutton(self,variable = self.track_playing,command = self.track_toggle,text = sound_file)
-         track_button.pack(side = LEFT)
-         self.volume = DoubleVar()
-         self.volume.set(self.track.get_volume())
-         volume_scale = Scale(self,variable = self.volume, from_ = 0.0, to = 1.0, resolution = 0.1, command = self.change_volume, label = "Volume", orient = HORIZONTAL)
-         volume_scale.pack(side = RIGHT)
+   app_div = html.DIV(id='app')
+
+   sound_panel = SoundPanel('https://bigsoundbank.com/UPLOAD/mp3/0751.mp3')
+
+   track_button = html.INPUT(type='checkbox')
+   track_button.bind('change', sound_panel.track_toggle)
+
+   track_label = html.LABEL('Play Sound')
+   track_label <= track_button
+
+   volume_slider = html.INPUT(type='range', min='0', max='1', step='0.1')
+   volume_slider.bind('input', sound_panel.change_volume)
+
+   volume_label = html.LABEL('Volume')
+   volume_label <= volume_slider
+
+   app_div <= sound_panel.track
+   app_div <= track_label
+   app_div <= volume_label
+
+   document <= app_div
 
 
 Main program
 ------------------
 
++ Try running this code in your PC and see the code dynamically generate soundpanels for wav files in your directory.
+
 .. code-block :: python
 
    from tkinter import *