update dj mix app to run in the browser without using pc

PyAr · Mar 11, 2024 · fd5845f · fd5845f
1 parent 4fa050b
commit fd5845f
Show file tree

Hide file tree

Showing 6 changed files with 244 additions and 192 deletions.
diff --git 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
diff --git 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()
+      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
+
diff --git 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
@@ -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()