split index page, added basic audio playback

myproject/myapp/migrations/0001_initial.py

+# Generated by Django 5.0.1 on 2024-03-04 13:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Audio',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('file', models.FileField(upload_to='audio', verbose_name='audio')),
+            ],
+        ),
+    ]

myproject/myapp/models.py

-# from django.db import models
+from django.db import models
 
 # #   Usertypes
 # #   ---------
@@ -57,4 +57,5 @@
 #     data = models.CharField(max_length=2000)
 #     uploader = models.ForeignKey("User", on_delete=models.CASCADE)
     
-
+class Audio(models.Model):
+    file = models.FileField('audio', upload_to='audio')
\ No newline at end of file

myproject/myapp/templates/index1.html

@@ -2,7 +2,7 @@
 
 {% block content %}
   <section class="bg-white dark:bg-gray-900">
-    <div class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-16 lg:px-6">
+    <div class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2">
         <div class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
             <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">An Intelligent System for Instrument Detection</h2>
             <p class="mb-4">*placeholder input* We present to you a intelligent system for instrument detection. Using audio processing techinques and a convolutionsal 
@@ -17,7 +17,7 @@
         </div>
     </div>
     <div >
-      <form enctype="multipart/form-data" method="post" class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-16 lg:px-6">
+      <form enctype="multipart/form-data" method="post" class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2">
         {% csrf_token %}
         <input 
           class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" 
@@ -31,6 +31,31 @@
         </button>
       </form>
     </div>
+    
+    <audio id="myAudio">
+      <source src="{% static 'src/media/G53-44104-1111-00083.wav' %}" type="audio/wav">
+      Your browser does not support the audio element.
+    </audio>
+ 
+    <div class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-8">
+      <button onclick="playAudio()" type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
+        Play Audio</button>
+      <button onclick="pauseAudio()" type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
+        Pause Audio</button> 
+    </div>
+
+      <script>
+      var x = document.getElementById("myAudio"); 
+      
+      function playAudio() { 
+        x.play(); 
+      } 
+      
+      function pauseAudio() { 
+        x.pause(); 
+      } 
+      </script>
+    
 </section>
 
   

myproject/myapp/views.py

@@ -2,7 +2,9 @@ from django.shortcuts import render
 from django.template import RequestContext
 
 def index(request):
-    
+    #for now this authenication just returns the main view
+    #when user auth is done change the else to return index2.html
+    if request.user.is_authenticated:
         if request.method == 'POST':
             if request.FILES['audio_file'] != None:
                 uploaded_file = request.FILES['audio_file']
@@ -10,12 +12,8 @@ def index(request):
             return render(request, 'index1.html')
         else:
             return render(request, 'index1.html')
-    # if request.user.is_authenticated:
-    #     return render(request, 'index1.html')
-    # else:
-    #     return render(request, 'index1.html')
-
-
+    else:
+        return render(request, 'index1.html')
  
 def users(request):
     return render(request, 'user_page.html')