Skip to content

Instantly share code, notes, and snippets.

@CrookedNumber

CrookedNumber/gist:c4f34da70813e95dd9e2ff58d8ace8a1

Last active March 13, 2018 19:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CrookedNumber/c4f34da70813e95dd9e2ff58d8ace8a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CrookedNumber/c4f34da70813e95dd9e2ff58d8ace8a1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CrookedNumber revised this gist Mar 13, 2018. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,11 @@
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <?php
    // PUT THIS PAGE ON A SERVER
    // AND GOT TO THE ADDRESS
    // http://example.com?url=URL&s=1234
    // WHERE URL is a URL to an mp3/4 and s is the number of seconds in where you want to
    // start playing
    $url = isset($_GET['url']) ? $_GET['url'] : '';
    if (preg_match("/^https?:\/\/[\w\d:#@%\/;$()~_?\+-=\\\.&]*\.mp3$/", $url, $matches)) {
    $url = $matches[0];
  2. CrookedNumber created this gist Mar 13, 2018.
    203 changes: 203 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,203 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <?php
    $url = isset($_GET['url']) ? $_GET['url'] : '';
    if (preg_match("/^https?:\/\/[\w\d:#@%\/;$()~_?\+-=\\\.&]*\.mp3$/", $url, $matches)) {
    $url = $matches[0];
    }
    $s = (isset($_GET['s'])) ? (int) $_GET['s'] : 0;
    ?>
    <script>var url = "<?php print $url; ?>"; var s = <?php print $s; ?>;</script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.4.0/jsmediatags.min.js"></script>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

    <!-- ICONS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
    #pause,
    #play,
    #previous,
    #next,
    #replay,
    #forward
    {
    cursor: pointer;
    }
    .thumb.active {
    display: none;
    }
    #play-controls {
    }
    #controls {
    width: 50%;
    margin: 30%
    }
    #page {
    background-color: #fff;
    }
    .valign-wrapper {
    height: 500px;
    }

    </style>
    </head>

    <body>
    <div class="container" id="page">
    <div class="valign-wrapper">
    <div class="row">
    <audio @ended="end" @loadedmetadata="setDuration" @timeupdate="updateTime" ref="player" id="player">
    <source :src="audio.src" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
    </div>
    <div class="valign" id="controls">
    <div class="row">
    <div id="play-controls" class="center-align">
    <i @click="previous" id="previous" class="material-icons medium" v-if="false">skip_previous</i>
    <i @click="replay" id="replay" class="material-icons medium">replay_30</i>
    <i @click="pause" id="pause" class="material-icons medium" v-if="playing">pause_circle_outline</i>
    <i @click="play" id="play" class="material-icons medium" v-else>play_circle_outline</i>
    <i @click="forward" id="forward" class="material-icons medium">forward_30</i>
    <i @click="next" id="next" class="material-icons medium" v-if="false">skip_next</i>
    </div>
    </div>
    <div class="row">
    <div class="col s12">
    <div id="times" class="center-align">
    <span class="start">{{ currentFormatted }}</span>/<span>{{ durationFormatted }}</span>
    </div>
    </div>
    <div class="">
    <input v-if="false" @change="scrub()" type="range" min="0" :max="duration" v-model="current">
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    <script>
    var app = new Vue({
    el: '#page',
    data: {
    audio: {},
    playing: false,
    skipTime: 30,
    current: window.s,
    duration: 0,
    currentFormatted: '0:00',
    durationFormatted: '0:00'
    },
    created: function() {
    this.setAudio();
    },
    watch: {
    current: function(value) {
    this.currentFormatted = this.formatSeconds(value)
    }
    },
    methods: {
    setDuration: function() {
    this.duration = Math.round(this.$refs.player.duration);
    this.durationFormatted = this.formatSeconds(this.$refs.player.duration);
    this.setTime(this.current);
    },
    setAudio: function() {
    this.audio = {
    src: window.url,
    //headline: newscast.title,
    //duration: newscast.duration
    };
    //this.duration = this.audio.duration;
    //this.durationFormatted = this.formatSeconds(this.duration);
    },
    setTime: function(time) {
    this.current = time;
    this.$refs.player.currentTime = time;
    this.currentFormatted = this.formatSeconds(time);
    },
    scrub: function() {
    this.pause();
    this.$refs.player.currentTime = this.current;
    this.play();
    },
    load: function() {
    this.$refs.player.load();
    },
    play: function() {
    this.$refs.player.play();
    this.playing = true;
    },
    pause: function() {
    this.$refs.player.pause();
    this.playing = false
    },
    updateTime: function() {
    this.current = Math.round(this.$refs.player.currentTime);
    },
    replay: function() {
    var time = this.current;
    var newTime = 0;
    if (time > this.skipTime) {
    newTime = time - this.skipTime;
    }
    this.setTime(newTime);
    },
    forward: function() {
    var time = this.current;
    var newTime = time + 30;
    if (newTime > this.duration) {
    this.next();
    }
    else {
    this.setTime(newTime);
    }
    },
    previous: function () {
    if (this.current < 2) {
    this.playTrack(this.nowPlaying - 1);
    }
    else {
    this.pause();
    this.current = 0;
    this.play();
    }
    },
    next: function () {
    this.playTrack(this.nowPlaying + 1);
    },
    formatSeconds: function(time) {
    time = Math.round(time);
    var seconds = time % 60;
    var minutes = Math.floor(time / 60);
    seconds = (seconds < 10) ? "0" + seconds : seconds;
    //minutes = (minutes < 10) ? "0" + minutes : minutes;
    return minutes + ":" + seconds;
    },
    end: function() {
    this.setTime(window.s);
    this.pause();
    },
    nextUp: function() {
    var index = (this.nowPlaying > this.limit - 2) ? 0 : this.nowPlaying + 1;
    this.playTrack(index);
    }
    }
    });
    </script>
    </html>