OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to play different audios on a single <audio> tag Django app

  • Thread starter Thread starter Federico Monetti
  • Start date Start date
F

Federico Monetti

Guest
I'm making a music streaming website. On the homepage I have a carousel with songs and I want to play them onclick in a single HTML <audio> tag. How can I achieve that? Do I have to write a JavaScript function? If yes, how it should look like?

This is my HTML:

Code:
<div class="main-carousel" data-flickity='{"groupCells":5 , "contain": true, "pageDots": false, "draggable": false, "cellAlign": "left", "lazyLoad": true}'>
        {% for i in songs %}
            <div class="carousel-cell">
                <section class="main_song">
                    <div class="song-card">
                        <div class="containera">
                            <img src="{{i.image}}" id="A_{{i.id}}" alt="song cover">
                            <div class="overlaya"></div>
                            <div>
                                <a class="play-btn" href="...?" id="{{i.id}}"><i class="fas fa-play-circle fa-2x"></i></a>
                                {% if user.is_authenticated %}
                                    <div class="add-playlist-btn">
                                        <a id="W_{{i.song_id}}" title="Add to Playlist" onclick="showDiv(this)"></a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div>
                        <p class="songName" id="B_{{i.id}}">{{i.name}}</p>
                        <p class="artistName">{{i.artist}}</p>
                    </div>
                </section>
            </div>
        {% endfor %}
    </div>
    <audio preload="auto" controls id="audioPlayer">
        <source src=...?>
        </audio>

My models.py:

Code:
class Song(models.Model):
    song_id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=50)
    artist = models.CharField(max_length=50)
    album = models.CharField(max_length=50, blank=True)
    genre = models.CharField(max_length=20, blank=True, default='Album')
    song = models.FileField(upload_to="songs/", validators=[FileExtensionValidator(allowed_extensions=['mp3', 'wav'])], default="name")
    image = models.ImageField(upload_to="songimage/", validators=[FileExtensionValidator(allowed_extensions=['jpeg', 'jpg', 'png'])], default="https://placehold.co/300x300/png")
    data = models.DateTimeField(auto_now=False, auto_now_add=True)
    slug = models.SlugField(unique=True)

    def __str__(self):
        return self.name

    class Meta:
        ordering = ['name']

<p>I'm making a music streaming website. On the homepage I have a carousel with songs and I want to play them onclick in a single HTML <code><audio></code> tag. How can I achieve that? Do I have to write a JavaScript function? If yes, how it should look like?</p>
<p>This is my HTML:</p>
<pre><code><div class="main-carousel" data-flickity='{"groupCells":5 , "contain": true, "pageDots": false, "draggable": false, "cellAlign": "left", "lazyLoad": true}'>
{% for i in songs %}
<div class="carousel-cell">
<section class="main_song">
<div class="song-card">
<div class="containera">
<img src="{{i.image}}" id="A_{{i.id}}" alt="song cover">
<div class="overlaya"></div>
<div>
<a class="play-btn" href="...?" id="{{i.id}}"><i class="fas fa-play-circle fa-2x"></i></a>
{% if user.is_authenticated %}
<div class="add-playlist-btn">
<a id="W_{{i.song_id}}" title="Add to Playlist" onclick="showDiv(this)"></a>
</div>
{% endif %}
</div>
</div>
</div>
<div>
<p class="songName" id="B_{{i.id}}">{{i.name}}</p>
<p class="artistName">{{i.artist}}</p>
</div>
</section>
</div>
{% endfor %}
</div>
<audio preload="auto" controls id="audioPlayer">
<source src=...?>
</audio>
</code></pre>
<p>My models.py:</p>
<pre><code>class Song(models.Model):
song_id = models.AutoField(primary_key=True)
name = models.CharField(max_length=50)
artist = models.CharField(max_length=50)
album = models.CharField(max_length=50, blank=True)
genre = models.CharField(max_length=20, blank=True, default='Album')
song = models.FileField(upload_to="songs/", validators=[FileExtensionValidator(allowed_extensions=['mp3', 'wav'])], default="name")
image = models.ImageField(upload_to="songimage/", validators=[FileExtensionValidator(allowed_extensions=['jpeg', 'jpg', 'png'])], default="https://placehold.co/300x300/png")
data = models.DateTimeField(auto_now=False, auto_now_add=True)
slug = models.SlugField(unique=True)

def __str__(self):
return self.name

class Meta:
ordering = ['name']
</code></pre>
 

Latest posts

M
Replies
0
Views
1
MOHAMED AMIIN ABDI AADAN
M
Top