Thiết kế website giá rẻ

Question

Flask code:

import os
from flask import Flask, render_template, send_file, request

app = Flask(__name__, static_url_path='/static', static_folder='static')

@app.route('/')
def index():
    # Read the first song ID from 'similar.txt'
    with open('similar.txt', 'r') as file:
        similar_song_ids = [line.strip() for line in file]

        # Ensure only the first 6 characters are stored (assuming IDs are 6 characters long)
        similar_song_ids = [song_id[:6] for song_id in similar_song_ids]

    # Find paths for all similar songs from 'checksums.txt'
    similar_songs = []
    with open('checksums.txt', 'r') as file:
        checksums = file.readlines()
        for line in checksums:
            song_id, song_path = line.strip().split(', ')
            if song_id in similar_song_ids:
                # Correctly format the file path using os.path.join
                song_path = os.path.join('static', song_path.replace('/', '/'))
                similar_songs.append({'id': song_id, 'path': song_path})
        print (similar_songs)

    # Get the path of the first song for main playback
    first_song_path = similar_songs[0]['path']

    # Render the template with main song and similar suggestions
    return render_template('index.html', song_path=first_song_path, similar_songs=similar_songs[1:])

@app.route('/play')
def play_song():
    # Retrieve the song path from the query parameter
    song_path = request.args.get('path', '')

    # Play the song
    return send_file(song_path, as_attachment=True)

if __name__ == '__main__':
    app.run(debug=True)

the html code is this that im using:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MP3 Player</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: black; /* Changed background color to black */
            background-image: url('/static/qw.jpg'); /* Add your image path here */
            text-align: center;
            margin: 0;
            padding: 0;
        }
        #title {
            font-size: 40px; /* Increased font size */
            color: #fff;
            margin-top: 20px;
            margin-right: -750px;
            font-weight: bold; /* Added font weight */
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Changed font family */
        }
        .container {
            padding: 100px;
            background-color: #030207; /* Set container background color to Spotify green */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: auto;
            margin-top: -30px; /* Adjust margin-top as needed */
            margin-right: 200px;
            margin-bottom: -230px;
            background-size: cover;
            background-position: center;
        }
        h1 {
            color: #fff;
            margin-bottom: 20px;
        }
        audio {
            width: 100%;
            margin-bottom: 20px;
        }
        .suggestions {
            margin-top: 20px;
            color: #fff;
            text-align: left;
        }
        .suggestions ul {
            list-style-type: none;
            padding: 0;
        }
        .suggestions ul li {
            margin-bottom: 10px;
            background-color: #000000;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .suggestions ul li:hover {
            background-color: #1DB954;
        }
    </style>
</head>
<body>
    <div id="title">S_A_M Player</div>
    <div class="container">
        <h1>Song</h1>
        <audio controls>
            <source src="{{ song_path }}" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
    <div class="container suggestions">
        <h2>Similar Suggestions</h2>
        <ul>
            {% for song in similar_songs %}
                <li onclick="playAudio('{{ song.path }}')">{{ song.id }}</li>
            {% endfor %}
        </ul>
    </div>

    <script>
        function playAudio(src) {
            var audio = document.querySelector('audio');
            audio.src = src;
            audio.play();
        }
    </script>
</body>
</html>

in the above code im sending file paths to html which using those paths play those audios.
the ‘similar_songs’ variable is storing the paths in this format:
{‘id’: ‘000002’, ‘path’: ‘staticfma_large0000002.mp3’}

the issue is that it is adding instead of 1 but 2 backslashes () in the path.
when html code tries to access that path it says that it cannot access the path:
“127.0.0.1 – – [11/May/2024 20:55:12] “GET /static%0Cma_large%00%00158.mp3 HTTP/1.1” 404 -“

what im expecting that it stores path in this format and sends it to html:
{‘id’: ‘000002’, ‘path’: ‘staticfma_large0000002.mp3’}

Thiết kế website giá rẻ

Danh mục

Flask to html audio files path sharing