• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suche in einem HTML Code einbinden

Alaska1966

Mitglied
Hallo Leute, ich habe ein schönes Webradio entdeckt. Doch leider hat das Webradio keine Suche. Ich wollte eine Suche mit Autovervollständigung und Autoplay. Ich habe es versucht, aber irgendwie kriege ich das nicht richtig hin.

Ich wollte das suchen Fenster über die Button (play, stop usw). Kann mir bitte einer dabei helfen, das wäre sehr nett?

Gruß Peter

[edit by Mod "SpiceLab" - Anhang von unbekannter / unseriöser Quelle nachträglich entfernen]
 
Werbung:
Ich weiß nicht ob man sich hier eine ZIP-Datei runterladen möchte. Kannst Du das nicht online bereitstellen, so dass man es sich direkt anschauen kann?
 
Klar mache ich doch gerne, wenn reicht. Hier die index.html

HTML:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/audioplayers/0.1.34/audioplayers.min.js"></script>
    <title>Webradio mit exklusiver Musik</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
    <link rel="shortcut icon" href="https://borderline-selbsthilfe.org/de/img/favicon.png">

</head>

<body>
          <div id="reproductor">
       <audio src="" id="audio" type="audio/mpeg">
           <source src="song.mp3" type="audio/mpeg">
           <source src="song.ogg" type="audio/ogg">
           <source src="song.wav" type="audio/wav">
           <source src="song.m3u" type="audio/m3u">
           <source src="song.pls" type="audio/pls">
       </audio>
       <div class="conte-disk">
            <div id="cd">
                <img src="img/cd.jpg" alt="img-cd" class="cd">
            </div>
            <div id="central"></div>
        </div>
        <div class="conte-controll">
            <div id="lcd">
                <div class="lcd-song">
                    <div id="song-title"></div>
                </div>
                <div class="lcd-time">
                    <div id="song-time"></div>
                </div>
            </div>
            <div class="btn-controll">
                <button class="boton-control" id="rebackward">
                    <i class="fa fa-fast-backward"></i></button>
                <button class="boton-control" id="backward">
                    <i class="fa fa-backward"></i></button>
                <button class="boton-control" id="play">
                    <i class="fa fa-play"></i></button>
                <button class="boton-control" id="pause">
                    <i class="fa fa-pause"></i></button>
                <button class="boton-control" id="stop">
                    <i class="fa fa-stop"></i></button>
                <button class="boton-control" id="forward">
                    <i class="fa fa-forward"></i></button>
                <button class="boton-control" id="reforward">
                    <i class="fa fa-fast-forward"></i></button>
            </div>
        </div>
        <div class="conte-radio">
            <button class="boton-radio" id="radio">
                <i class="radio">Radio</i></button>
            <button class="boton-radio" id="rest-emi">
                <i class="fa fa-step-backward"></i></button>
            <button class="boton-radio" id="plus-emi">
                <i class="fa fa-step-forward"></i></button>
        </div>
        <div class="conte-list">
            <button class="fa fa-music" id="list"></button>
            <p>0</p>
            <input type="range" id="volume" value="1" step="1">
            <p>100</p>
            <div id="list-list">
                <div id="text-list"></div>
                <span class="arrow"></span>
            </div>
        </div>
    </div>
    <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script>
        // Lade die URLs aus der externen script.js-Datei
        $.ajax({
            url: "./script.js",
            dataType: "script",
            cache: true,
            success: function () {
                // Prüfe, ob customSongList in script.js definiert ist
                if (typeof customSongList !== 'undefined' && Array.isArray(customSongList)) {
                    // Füge die benutzerdefinierten URLs am Anfang der ursprünglichen songList hinzu
                    songList.unshift.apply(songList, customSongList);
                }

                // Hier kannst du mit der aktualisierten songList weiterarbeiten
                // ...

                // Dein weiterer Code bleibt unverändert
                // ...
            },
            error: function (request, status, error) {
                console.error("Fehler beim Laden der script.js:", status, error);
            }
        });
    </script>
    <script src="./script.js"></script>
</body>

</html>




Das Forum meckert nicht mehr als 10.000 Zeichen
Ich sage mal danke. Gruß Peter
 
Werbung:
Hier der 2 Teil. style.css

CSS:
Und hier die style.css

[CODE=css]*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body{

    font-family: 'Chakra Petch', sans-serif;

}



#reproductor {

    position: relative;

    width: 420px;

    height: auto;

    background-color: #444;

    border: solid #333;

    border-radius: 50px 0 0 0;

    margin: 100px auto;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    padding: 6px;

}



/************************************************

*************** DISK ****************************

************************************************/

.conte-disk {

    position: relative;

    width: 100px;

    height: 100px;

    padding: 3px;

    border: solid #fff;

    border-radius: 100%;

}



#cd {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border-radius: 100%;

    overflow: hidden;

}



.cd {

    position: absolute;

    width: 100%;

    height: 100%;

}



#central {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    width: 20px;

    height: 20px;

    background-color: #000;

    border: 2px solid #fff;

    border-radius: 100%;

    display: none;

}



#cd.spin {

    animation: roller 3s linear infinite;

}



#cd.spin ~ #central {

    display: block;

}

#cd {

  animation: rotate 3s linear infinite;

  animation-duration: 3s;

}



@keyframes roller {

    0%{transform: rotateZ(0);}

    100%{transform: rotateZ(360deg);}

}



/************************************************

*************** SCREEN *************************

************************************************/

#lcd {

    position: relative;

    width: 220px;

    height: 30px;

    color: #CB93C4;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #000;

}



.lcd-song {

    width: 80%;

    font-size: 14px;

    overflow: hidden;

}



#song-title {

    width: 400px;

    height: auto;

    animation: pass 10s linear infinite;

}



@keyframes pass {

    0%{margin-left: 220px;}

    40%{margin-left: 0px;}

    60%{margin-left: 0px;}

    100%{margin-left: -400px;}

}



.lcd-time {

    position: relative;

    width: 19%;

    height: 100%;

    text-align: center;

}



#song-time{

    font-size: 11px;

    color: #CB93C4;

}



/************************************************

*************** BOTONES *************************

************************************************/

.conte-radio {

    position: relative;

    width: 65px;

    height: 100px;

    border-top: 1px solid #999;

    border-left: 1px solid #999;

    border-right: solid #333;

    border-bottom: solid #333;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;

    padding: 20px 3px 0 3px;

}



#radio {

    width: 50px;

    height: 25px;

}



#rest-emi, #plus-emi {

    width: 25px;

    height: 25px;

}



.btn-controll {

    width: 100%;

    height: auto;

    display: flex;

    justify-content: space-around;

    margin-top: 20px;

    border-top: 1px solid #999;

    border-left: 1px solid #999;

    border-right: solid #333;

    border-bottom: solid #333;

    padding: 6px 0;

}



.boton-control {

    width: 25px;

    height: 25px;

}



button {

    background: linear-gradient(#777, #aaa);

    color: #CB93C4;

    border: none;

}



button:hover {

    background: linear-gradient(#aaa, #777);

}



#pause {

    display: none;

}



.conte-list {

    position: relative;

    width: 80%;

    height: 25px;

    margin: 6px auto 0;

    display: flex;

    justify-content: flex-end;

}



#list {

    position: absolute;

    top: 0;

    left: 0;

    width: 25px;

    height: 25px;

}



#volume {

  width: 200px;

  margin-left: 5px;

  margin-right: 5px;

  cursor: pointer;

}



input[type=range] {

  -webkit-appearance: none;

  width: 100%;

  margin: 13.2px 0;

}

input[type=range]:focus {

  outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

  width: 100%;

  height: 12.6px;

  cursor: pointer;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

  background: #928483;

  border-radius: 6.2px;

  border: 0.7px solid #562425;

}

input[type=range]::-webkit-slider-thumb {

  box-shadow: 1px 1px 1px #050000, 0px 0px 1px #1f0000;

  border: 2.2px solid #000000;

  height: 25px;

  width: 6px;

  border-radius: 2px;

  background: #7A417A;

  cursor: pointer;

  -webkit-appearance: none;

  margin-top: -13.9px;

}

input[type=range]:focus::-webkit-slider-runnable-track {

  background: #9e9191;

}

input[type=range]::-moz-range-track {

  width: 100%;

  height: 12.6px;

  cursor: pointer;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

  background: #928483;

  border-radius: 6.2px;

  border: 0.7px solid #562425;

}

input[type=range]::-moz-range-thumb {

  box-shadow: 1px 1px 1px #050000, 0px 0px 1px #1f0000;

  border: 2.2px solid #000000;

  height: 25px;

  width: 6px;

  border-radius: 2px;

  background: #7A417A;

  cursor: pointer;

}

input[type=range]::-ms-track {

  width: 100%;

  height: 12.6px;

  cursor: pointer;

  background: transparent;

  border-color: transparent;

  color: transparent;

}

input[type=range]::-ms-fill-lower {

  background: #867776;

  border: 0.7px solid #562425;

  border-radius: 12.4px;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

}

input[type=range]::-ms-fill-upper {

  background: #928483;

  border: 0.7px solid #562425;

  border-radius: 12.4px;

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

}

input[type=range]::-ms-thumb {

  box-shadow: 1px 1px 1px #050000, 0px 0px 1px #1f0000;

  border: 2.2px solid #000000;

  height: 25px;

  width: 6px;

  border-radius: 2px;

  background: #7A417A;

  cursor: pointer;

  height: 12.6px;

}

input[type=range]:focus::-ms-fill-lower {

  background: #928483;

}

input[type=range]:focus::-ms-fill-upper {

  background: #9e9191;

}



.conte-list p {

  color:#CB93C4;

}



#list-list {

    position: absolute;

    top: 25px;

    left: 50px;

    width:0px;

    height: 0px;

    background-color: #666;

    padding: 6px;

    border-radius: 0 15px 15px 15px;

    opacity: 0;

    transition: 1s all ease-in-out;

}



#text-list {

    position: relative;

    width: 100%;

    height: 100%;

    background-color: #000;

    border-radius: 15px;

    font-size: 12px;

    color: yellow;

    overflow: hidden;

    padding: 6px;

}



.arrow{

    position: absolute;

    top: -6px;

    left: -25px;

    width: 0;

    height: 0;

    border-left: 40px solid #666;

    border-top: 6px solid transparent;

    border-bottom: 6px solid transparent;

    transform: rotateZ(-150deg);

    z-index: 5;

}



#list-list.open {

    width: 300px;

    height: auto;

    opacity: 1;

}



.temuca {

  cursor: pointer;

}



.temuca:hover {

  color: red;

}
[/CODE]
 
Die Datei wo die urls drin stehen und die Suche drauf zu greifen heißt script.js

hier die script.

Code:
$(function () {
    var songList = [
        '',
        'https://hoerspiel.stream.laut.fm/hoerspiel?pl=pls&t302=2023-11-15_14-45-32&uuid=e1130b81-fe22-4b49-8a5f-f84eba3c43ef',
        'https://dthoerspieler.stream.laut.fm/dthoerspieler?pl=pls&t302=2023-11-15_14-45-12&uuid=d3e5e446-4a40-4b4c-8bc6-a86fcfd6c3f5',
        'https://hoerspiel.stream.laut.fm/hoerspiel?pl=pls&t302=2023-11-15_14-45-32&uuid=e1130b81-fe22-4b49-8a5f-f84eba3c43ef',
        'https://brainflowermedia.stream.laut.fm/brainflowermedia?pl=pls&t302=2023-11-15_14-46-12&uuid=be161e93-90fd-4840-be14-1c489e78bb5a',
        'https://seitenwispern.stream.laut.fm/seitenwispern?pl=pls&t302=2023-11-15_14-46-49&uuid=26523012-ae9e-4d21-ac3c-d2f3166b81b6',
        'https://mrawesome15-music.stream.laut.fm/mrawesome15-music?pl=pls&t302=2023-11-19_15-30-26&uuid=f0f01472-59c5-42bc-b16f-4cab70941a5a',
                                
    ];

    var songTitle = [
        'Hörspiel, Podcast & besondere Anlässe',
        ' Hörspiel Bielefeld',
        ' DT Hörspieler Berlin',
        ' Hörspiel Bielefeld 24/7h',
        ' Hörspiele Brainflowermedia',
        ' Seitenwispern von Broken Moon ',
        ' MrAwesome15 Hörspiele, Klassische Musik',
                        
    ];

    var foto = [
        'img/hoerspiele.jpg',
        'img/bielefeld.jpg',
        'img/headphoneman-rot_sio.jpg',
        'img/buecher-lesen.jpg',
        'img/brainflowermedia.png',
        'img/seitenwispern.jpg',
        'img/mrawesome15.jpg',
                                        
    ];

    var emisor = [
    
        'https://wdr-1live-live.icecastssl.wdr.de/wdr/1live/live/mp3/128/stream.mp3',
        'https://wdr-1live-dancehits.icecast.wdr.de/wdr/1live/dancehits/mp3/128/stream.mp3',
        'https://wdr-1live-chillout.icecast.wdr.de/wdr/1live/chillout/mp3/128/stream.mp3',
        'https://wdr-1live-tophits.icecast.wdr.de/wdr/1live/tophits/mp3/128/stream.mp3',
        'http://wdr-1live-specials.icecast.wdr.de/wdr/1live/specials/mp3/128/stream.mp3',
        'https://wdr-wdr2-rheinland.icecastssl.wdr.de/wdr/wdr2/rheinland/mp3/128/stream.mp3',
        'http://wdr-wdr3-live.icecast.wdr.de/wdr/wdr3/live/mp3/128/stream.mp3',
        'https://wdr-wdr4-live.icecastssl.wdr.de/wdr/wdr4/live/mp3/128/stream.mp3',
        'http://wdr-wdr5-live.icecast.wdr.de/wdr/wdr5/live/mp3/128/stream.mp3',
        'https://wdr-diemaus-live.icecastssl.wdr.de/wdr/diemaus/live/mp3/56/stream.mp3',
        'http://wdr-wdr-event.icecast.wdr.de/wdr/wdr/event/mp3/128/stream.mp3',
        'https://liveradio.swr.de/sw282p3/swr1bw/',
        'https://liveradio.swr.de/sw282p3/swr2/',
        'https://liveradio.swr.de/sw282p3/swr3/',
        'https://liveradio.swr.de/sw282p3/swraktuell/',
        'https://liveradio.swr.de/sw282p3/swr4bw/',       
    ];

    var emisorName = [
 
        ' 1LIVE',
        ' 1LIVE DANCE HITS ',
        ' 1LIVE CHILLOUT',
        ' 1LIVE TOP HITS',
        ' 1LIVE SPECIAL',
        ' WDR 2 (‍♀️ Rhein und Ruhr)',
        ' WDR 3 ist die Hörfunk-Kulturwelle',
        ' WDR 4 für Menschen über 50 Jahren',
        ' WDR 5 Kompetenter Journalismus',
        ' Die Maus',
        '️ WDR Event',
        ' SWR1 BW',
        ' SWR2',
        ' SWR3',
        ' SWR aktuell ',
        ' SWR4 BW',
    ];

    var song = songList.length,
        band = emisor.length,
        posSong = 0,
        posSongtitle = 0,
        posFoto = 0,
        posEmisor = 0,
        posEmisorName = 0,

        audio = document.getElementById('audio'),
        min = Math.floor(audio.currentTime / 60),
        seg = Math.floor(audio.currentTime % 60);

    audio.src = songList[posSong];

    $('#rebackward').on('click', rebackward);
    $('#backward').on('click', backward);
    $('#play').on('click', repro);
    $('#pause').on('click', pausa);
    $('#stop').on('click', stop);
    $('#forward').on('click', forward);
    $('#reforward').on('click', reforward);
    $('#list').on('click', lista);
    $('#radio').on('click', radiola);
    $('#rest-emi').on('click', restEmi);
    $('#plus-emi').on('click', plusEmi);

    var volumeslider = document.getElementById('volume')
    volumeslider.addEventListener("change", setvolume, false);

    function rebackward() {
        posSong--;
        posSongtitle--;
        posFoto--;
        audio.src = songList[posSong];
        $('.cd').attr('src', foto[posFoto]);
        audio.play();
        look();
        if (posSong <= 0) {
            posSong = song - 1;
        }
        if (posSongtitle <= 0) {
            posSongtitle = song - 1;
        }
        if (posFoto <= 0) {
            posFoto = song - 1;
        }
    }

    function backward() {
        audio.currentTime -= 10;
        audio.play();
    }

    function repro() {
        $('.boton-radio').prop('disabled', true);
        $('.boton-radio').css('color', '#ccc');

        $('#play').css('display', 'none');
        $('#pause').css('display', 'block');

        audio.play();

        $('.cd').attr('src', foto[posFoto]);
        $('#cd').addClass('spin');
        look();
    }

    function pausa() {
        audio.pause();
        $(this).css('display', 'none');
        $('#play').css('display', 'block');
        $('#cd').removeClass('spin');
    }

    function stop() {
        audio.pause();
        $('#pause').css('display', 'none');
        $('#play').css('display', 'block');
        $('#cd').removeClass('spin');
        audio.src = songList[posSong];
        $('#song-title').html('');

        $('.boton-radio').prop('disabled', false);
        $('.boton-radio').css('color', 'aqua');

        $('.cd').attr('src', 'img/cd.jpg');

        $('#song-time').css('color', '#000');
    }

    function forward() {
        audio.currentTime += 10;
        audio.play();
    }

    function reforward() {
        posSong++;
        posSongtitle++;
        posFoto++;
        audio.src = songList[posSong];
        $('.cd').attr('src', foto[posFoto]);
        audio.play();
        look();
        if (posSong >= song - 1) {
            posSong = 0;
        }
        if (posSongtitle >= song - 1) {
            posSongtitle = 0;
        }
        if (posFoto >= song - 1) {
            posFoto = 0;
        }
    }

    var rad = false;

    // RADIO
    function radiola() {
        if (!rad) {
            $(this).css('color', 'pink');
            $('.boton-control').prop('disabled', true);
            $('.boton-control').css('color', '#ccc');
            audio.src = emisor[posEmisor];
            audio.play();
            look2();
            rad = true;
        } else {
            $(this).css('color', 'aqua');
            $('.boton-control').prop('disabled', false);
            $('.boton-control').css('color', 'aqua');
            audio.src = songList[posSong];
            audio.pause();
            $('#song-title').html('');
            rad = false;
        }
    }

    function restEmi() {
        posEmisor--;
        posEmisorName--;
        audio.src = emisor[posEmisor];
        audio.play();
        look2();
        if (posEmisor < 0) {
            posEmisor = band - 1;
            posEmisorName = band - 1;
        }
    }

    function plusEmi() {
        posEmisor++;
        posEmisorName++;
        audio.src = emisor[posEmisor];
        audio.play();
        look2();
        if (posEmisor >= band) {
            posEmisor = 0;
        }
        if (posEmisorName >= band) {
            posEmisorName = 0;
        }
    }

    function lista() {
        $('#list-list').toggleClass('open');
    }

    function setvolume() {
        audio.volume = volumeslider.value / 100;
    }

    var texto = document.getElementById('text-list');

    for (var i = 0; i <= song - 1; i++) {
        texto.innerHTML = texto.innerHTML + '<div class="temuca">' + songTitle[i] + '</div>';
    }

    function pass() {
        if (audio.duration == audio.currentTime)
            reforward();
    }

    setInterval(pass, 1000);

    function look() {
        $('#song-title').html("♫♪♫  " + (posSong + 1) + ": " + songTitle[posSongtitle] + "  ♫♪♫ ");
        $('#song-time').css('color', 'aqua');
        var getTimeString = function (timeInMs) {
            var point = ":",
                minutes = Math.floor((timeInMs / (1000 * 60)) % 60),
                seconds = Math.floor((timeInMs / 1000) % 60);
            if (minutes < 10) {
                minutes = "0" + minutes
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return minutes + point + seconds;
        }
        audio.ontimeupdate = function () {
            $('#song-time').html(getTimeString(audio.currentTime * 1000) + '<br>' + getTimeString(audio.duration * 1000));
        };
    }

    function look2() {
        $('#song-title').html('<span><i class="fa fa-microphone">' + " " + '</i></span>' + " " + (posEmisor + 1) + ": " + emisorName[posEmisorName] + " " + '<span><i class="fa fa-microphone">' + " " + '</i></span>');
    }
});
Ich hoffe das du mir helfen kanst.
Gruß Peter
 
Ich habe einen Vorschlag!
Wenn man auf die Notenschlüsse klickt, bekommt man ja eine Liste der Sender.
Wenn. man dann auf einen Eintrag in der Liste klickt. Sollte der Sender dann auch abgespielt werden. Wenn das einer machen würde wäre klasse.
Gruß Peter
 
Werbung:
Zurück
Oben