Skip to content

Instantly share code, notes, and snippets.

@CrookedNumber

CrookedNumber/gist:c4f34da70813e95dd9e2ff58d8ace8a1

Last active March 13, 2018 19:50
Show Gist options
  • Save CrookedNumber/c4f34da70813e95dd9e2ff58d8ace8a1 to your computer and use it in GitHub Desktop.
Save CrookedNumber/c4f34da70813e95dd9e2ff58d8ace8a1 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Vue Player
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
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];
}
$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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment